빅데이터 부트캠프 84일차

useContext

- 최상위 App 컴포넌트에서 useContext로 값을 지정하게 되면, 해당 값을 전역에 걸쳐 사용할 수 있도록하는 훅

(Context로 공유한 데이터를 쉽게 받아올 수 있게 해주는 기능)

- Context를 이용하면 단계마다 일일이 props를 넘겨주지 않고 컴포넌트 트리 전체에 선택적으로 데이터를 제공할 수 있음

=> 불필요한 prop drilling 해결

- prop drilling = props는 부모 컴포넌트가 자식 컴포넌트에게 단방향으로 데이터를 전달하기 때문에 부모 컴포넌트와 자식 컴포넌트 사이에 있는 컴포넌트들을 거쳐야하는 현상

- Context를 사용하면 컴포넌트 재사용이 어려움

- Context는 주로 따로 context 생성 js파일을 만들어 해당 파일에서 Context를 생성한뒤 App.js에서 import해서 사용

- App.js에서 <Context 생성 js파일명.Provider value={}>는 불러온 Context에 해당 value를 담아 다른 컴포넌트로 보낼 준비를 완료한 상태를 의미

- 이렇게 value가 담긴 Context는 필요한 컴포넌트에서 Context 객체를 import한뒤 useContext(컨텍스트명)을 통해 받아서 사용할 수 있음

※ 리렌더링 = 업데이트 과정을 거쳐 화면에 뷰를 새롭게 보여주는 현상

 

useMemo

- 메모이제이션(Memoization) =  컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술

- [useMemo(콜백함수, 배열)] 형태로 입력 

- useMemo에서 콜백함수는 메모이제이션을 해줄 값을 리턴해주는 함수

- useEffect와 같이 배열에 입력한 요소가 변할때 콜백함수 실행 (만약 빈 배열이면 처음에 컴포넌트가 마운트 되었을때만 콜백함수 실행)

- useMemo를 남용하면 오히려 성능이 악화됨

 

useCallback

- 메모리제이션된 콜백함수 반환

- useCallback(함수, 배열)은 useMemo(() => 함수, 배열)과 같음

 

상태 끌어올리기

- 상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행하는 방법

 

Computed Property Name

- { [key]: value} 형태

- key가 var key = e.target 처럼 입력값에 따라 동적으로 변하는 값일 경우 해당 value에 대한 key가 동적으로 변하는 것을 반영할 수 있도록 해줌ex) var name = e.target      setName([name]: value) => name이 Tom일 때는 Tom:value, name이 John일 때는 John:value

 

※ &nbsp; = 웹페이지 상에서 한칸 띄어쓰기를 반영해줌