반응형
React
내일부터 React를 들어가기에 니꼬센세의 Movie app 제작 강의를 듣기 시작했고 중요한 지식을 접하게 되었다.
아래는 두서없지만 가장 중요하다고 생각한 부분을 받아 적어놓은 것이다.
- Component는 HTML을 반환하는 함수이다.
- React application은 한번에 하나의 component만 rendering할 수 있다.
- 따라서 우리는 다른 component를 만들어 App.js에 넣어야한다.
- react는 재사용 가능한 component를 만들 수 있다. 이 말은 즉, component를 반복해서 사용할 수 있다는 것.
- <Food name= "kimchi"/>란 Food component에 kimchi라는 value로 prop name을 줬다는 것을 의미.
- JSX = HTML + Javascript
- react는 자동적으로 나의 class component의 render method를 실행한다.
- 왜 function component가 아닌 class component를 얘기해야하나? state때문이다.
- state는 object이고 여기에는 component의 변하는 data를 넣을 공간이있다.(API에서 데이터를 가져오는 경우)
- state는 setState와 함께 사용해야한다. 왜?
- refresh 하는데 필요하고 render function 호출을 해줘야하기 때문이다.
- "내가 setState를 호출할 때마다 react는 새로운 state와 함께 render function을 호출한다."
- react class component는 life cycle method를 가진다.
- life cycle method는 기본적으로 react가 component를 생성하고 없애는 방법이다.
life cycle method는 아래와 같이 세가지로 분류된다.
-mounting : 생성되는 것
-updating : update되는 것
-unmounting : 죽는 것
그리고 각각의 단계?에는 실행되는 함수가 있는데
mounting에는 순서대로 constructor, render, componentDIdMount가
updating는 setState를 호출한다면 순서대로 render, componentDidUpdate가
unmounting에는 componentWillUnmount(component가 떠날때 호출됨 ex: page변경 등)가 있다.
- component가 state를 필요로 하지 않다면 class component가 될 필요없이 function component로 만들어 준다.
Movie app 제작 중 ERROR...(feat. 니꼬)
위 기술한 개념들을 적으며 아하 아하하고 넘어가며 오 할만하네 하는 순간에 알 수 없는 에러가 발생했다.
어디가 뭐가 틀렸다라고 적혀있었지만 발견할 수가 없었다.
다시 동영상을 돌려서 확인하고 또 Ctrl + Z로 오지게 돌려보았지만 허사였다.
무엇이 문제인지 찾아서 리뷰하겠다.
하하하하ㅏㅏ하하하하하ㅏ하하하하하ㅏ하하하하하
객체는 React 하위항목으로 유효하지 않습니다. 자식 컬렉션을 렌더링하려면 배열을 대신 사용하십시오.
무슨말인지 알겠는데 그래 알겠는데 모르겠다.
비는 시간을 통해 알아보도록 하겠다.
반응형
