리액트 썸네일형 리스트형 [React] 리액트 Hook 정리 - 2 Context Hook 리액트 컴포넌트 트리에서 컨텍스트 객체를 받아 현재 값을 반환하는 Hook 함수. 부모와 자식 컴포넌트 사이 중간 컴포넌트들을 건너뛰고 데이터를 전달할 수 있다. 즉, 전역적인 데이터를 공유할 때 쓴다. (UI테마 등) 만약 깊이가 깊은 컴포넌트나, 애플리케이션 내의 여러 컴포넌트들에 props를 전달해야 한다면, 일일히 넘겨주려면 코드 작성도 수정도 번거로울 것이다. context를 쓰면 단계마다 넘겨줄 필요 없이 한번에 여러 컴포넌트들에게 값을 공유할 수 있다. -특징: useContext를 호출한 컴포넌트는 context 값이 변경되면 항상 리렌더링 된다. -사용법: 선언: createContext(초기값) 컴포넌트: 사용: useContext(Context명) -사용 예: .. 더보기 [React] 리액트 Hook 정리 - 1 1. Hook이란? 기존 클래스 컴포넌트에서만 가능했던 기능들(state, lifecycle관리)을 클래스 없이 사용할 수 있게 해주는 기능. 리액트 버전 16.8부터 추가되었다. 2. Hook을 쓰는 이유 - Class개념과 같이 객체지향에 익숙하지 않은 개발자도 리액트의 주요기능을 함수에서 쉽게 사용할 수 있음 - componentDidMount나 componentDidUpdate등의 lifecycle API 에서 불필요하게 포함된 요소를 직관적으로 분리해 사용가능. - Hook을 쓰면 계층 변화 없이 상태 로직을 재사용할 수 있음. 3. Hook 사용 시 주의점 - 최상위 레벨에서 Hook을 호출해야함. (반복문이나 조건문 등 중첩 함수 내에서 실행x) - 리액트 함수 컴포넌트 내에서만 Hook을 .. 더보기 이전 1 다음
