허도경, limewhale

React Hook 주의점 최상위 바깥에 선언해서 실행 순서가 일정하게 하는 것이 중요합니다. 조건문 안에서 Hook를 실행시키지 않습니다. hook안에 hook을 사용하지 않습니다. Hook을 일반적인 JavaScript 함수에서 호출하지 않습니다. React 함수 컴포넌트에서 Hook을 호출하세요. Custom Hook에서 Hook을 호출하세요. 리액트에서 Hook을 반복문, 조건문 혹은 중첩된 함수 내에서 호출하지 않습니다. Hook은 React 함수의 최상위(at the top level)에서 Hook을 호출해야 합니다. 이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장됩니다. 이러한 점은 React가 useState와 useEffect 가 여러 번 ..

어떻게 보면 리액트에서 가장 핵심이 되는 내용이 이번 컴포넌트의 내용이 아닐까 생각합니다. 컴포넌트를 공부하면서 props, state, 그리고 리액트 hooks 개념을 살펴보려고 합니다. 리액트에서 우리가 보는 하나의 화면에는 여러 개의 컴포넌트로 구성되어 있습니다. 컴포넌트는 사용자가 만들수 있는 하나의 데이터 블록(값이 변하는 영역)이라고 생각하면 조금은 이해가 쉬울 거 같아요. 그래도 이해가 잘 안가면 아래 그림을 한번 볼게요. 위 그림은 제가 예시로 만든 영상 목록 화면입니다. 그림에서 보면 컴포넌트로 구분할 수 있는 곳은 검색 영역, 영상 상세 view, 영상 리스트, 영상 썸네일 목록 이렇게 4개로 각각 구분될 수 있을 거 같아요. 값이 변하지 않는 곳은 컴포넌트로 분리하지 않아도 무방하고 ..