일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- 이진탐색
- forwardref type
- app:compiledebugkotlin
- 안드로이드빌드에러
- array
- 슬라이딩윈도우
- map
- generic
- Spring
- mainapplication.kt
- err_connection_refused
- interface
- app.post
- TS
- 상속
- reactnative
- javascript
- materialicons
- reactnative error
- extends
- Next.js
- set
- Filter
- npm에러
- 배열중복요소제거
- 스크롤이벤트
- async
- react
- 리액트네이티브아이콘
- 타입스크립트
- Today
- Total
목록React (24)
rhanziy
다양한 api 사이트에서 배열에 담긴 정보를 가져오는 법! useEffect(()=> { fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year") .then((response) => response.json()) .then((json) => { setMovies(json) }); }, []); useEffect( )를 사용해서 fetch( ).then( ).then( ); 이런 식으로 가져와도 되지만 가독성을 위해 아래와 같이 async/await을 사용해 json으로 변환해서 가져온다. function App(){ const [movies, setMovies] = useState([]); const getMovies = ..
HTML 삽입 미리보기할 수 없는 소스 리액트를 사용해 Todo리스트를 구현했다. 입력폼에 입력할 toDo state와 리스트를 구현할 toDos state를 생성해서, toDo를 입력하고 onSubmit버튼을 누르면 setToDos(currentArray => [toDo, ...currentArray]); 입력폼에 입력한 toDo + 누적된 toDo들로 새로운 배열을 만든다. 여기서, ...currentArray는 배열을 풀고 문자열을 나열함! 이제 이 값을 li로 뿌려준다. 리액트는 기본적으로 list에 있는 모든 item을 인식하기 때문에 key를 넣어 고유하게 만들어줘야 한다. map의 첫 번째 argument는 배열의 data, 두번째는 index 즉, 숫자를 의미한다. 다른 array func..
node.js에서 npm을 설치하고 create-react-app을 하게되면 지금까지 작성했던 것들이 간편하게 제공된다. 더 좋아진 점은 쉬운 모듈화! js에서 state와 props를 생성하다가 문득 css는 어떻게 적용하지 싶었는데 따로 module.css 파일을 만들어서 컴포넌트 파일에 import해주면 된다. CSS Module CSS Module 은 CSS 클래스를 불러와서 사용 할 때 [파일이름]_[클래스이름]__[해쉬값] 형태로 클래스네임을 자동으로 고유한 값으로 만들어주어서 컴포넌트 스타일 중첩현상을 방지해주는 기술이다. 이를 사용하기 위해선, [파일이름].module.css 이런식으로 파일을 저장해야함! 그리고 js파일에서 import styles(이름) from "./App.module..
App 컴포넌트 내에 html들에 속성으로 props를 부여할 수 있다. App컴포넌트 내에서 지정한 props들은 단독으로는 실행이안되고 Btn 컴포넌트에 파라미터로 전달해줘야한다!! -> 그냥 이름일 뿐 속성에 대한 값은 실행되는 컴포넌트에서 정의한다. function Btn(props){ return(
HTML 삽입 미리보기할 수 없는 소스 분을 시간으로 바꿔주는 MinutesToHours() 컴포넌트와 km를 m로 바꿔주는 KmToMiles() 를 App에 조립했다. 이번엔 삼항연산자를 많이 사용했는데 조건에 맞으면 1, 아니면 2번 코드가 실행되는 if문의 축약형. 리액트에서 html구조안에 자바스크립트는 { } 코드블럭 안에 작성하면된다. 복잡해보이지만 엄청 간단하게 구현한 예제같다. 안보고도 척척 짤 수 있어야 할텐데! 다시 한번 복습하자면 modifier함수에 값을 할당하면 data가 그 값으로 바뀌고 리렌더링, 리프레쉬 되는 것 명심!!
HTML 삽입 미리보기할 수 없는 소스 useState( ); 는 배열로 되어있으며 const [이름1, 이름2] 로 변수설정해서 간단하게 값에 접근할 수 있다. 첫번째 인자는 data고, 두번째 인자는 modifier인데 data값이 바뀌면 modifier가 render를 다시 불러오고, UI를 새로고침해준다. 버튼클릭 시 Total Clicks를 보여주는 setCounter에서 counter +1 말고 (current) => current + 1로 한 이유는 다른 실행 결과로 인해 counter 값이 변했을 때 그 값을 반영하기위해 더 안전하게 코드를 짠 것. 현재 값 + 1로 이해하면 된다.
HTML 삽입 미리보기할 수 없는 소스 리액트 강의 새로 들으면서 기초다듬기 리액트에서 사용하는 jsx는 javascript와 거의 똑같다. 규칙이 다를뿐! 컴포넌트들을 생성해서(이름 첫글자는 대문자) 조립해서 만드는 듯. 동적 구현을 위해 아예 이벤트리스너를 태그로 이용한다. 를 포함하고 를 이용해 브라우저가 jsx로 짠 코드들을 인식하게한다. 지금은 이벤트리스너를 실행하면 콘솔찍는 것만 배웠는데 스타일 관련된건 어떻게 처리하려낭...
Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state. "현존하는 state의 변화중에는 업데이트 할수 없습니다 "('랜더'내에서와 같이) 랜더 methods는 props와 state를 가진 하나의 순수한 function 이어야 합니다." Render 메서드 내부에 setState로 state를 변경하지 말라는 경고메세지이다. Render 내부에서 state를 바꾸면 모든 컴포넌트가 다시 렌더링되므로 무한 루프가 발생한다. 생활코딩 리액트 강의를 듣고 간단한 CRUD를 복습하면서 마주하게된 경고메세지..