Tech/React2 [React] Hooks 1. Hook의 정의 및 종류 리액트 v16.8에 도입된 기능으로, 클래스형 컴포넌트에서만 가능했던 작업들(상태관리, 렌더링 직후 작업 설정 등)을 함수형 컴포넌트에서도 사용할 수 있게 되었다. useState useEffect useReducer useMemo useCallback useRef 2. useState 가장 기본적인 Hook으로 컴포넌트가 가변적인 상태를 지닐 수 있게 해준다. 함수형 컴포넌트에서 상태관리가 필요하다면 useState를 사용한다. const [value, setValue] = useState(0); useState()가 호출되면 배열을 반환하는데, 배열의 첫 번째 원소는 상태 값(value), 두 번째 원소는 상태설정을 위한 함수가 반환된다. 함수의 파라미터에는 상태의 기본.. 2022. 8. 18. [React] 컴포넌트의 반복, 라이프사이클 메서드 컴포넌트의 반복 What is Key? 리액트에서 key는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내기위해 사용한다. Key가 없는 경우에는 Virtual DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지하지만, Key가 있는 경우는 이 값을 사용하여 DOM tree의 변화를 더 빠르게 감지할 수 있다. key 값은 언제나 유일해야 한다. 따라서 데이터가 가진 고유한 값을 key값으로 설정해야 한다. 데이터가 그 자신의 고유한 값이 없을 때는 javascript map()함수의 index를 이용할 수 있다. const names = ['홍길동','김길동','최길동']; const nameComp = names.map((name, index)=>{name}) 그러.. 2022. 8. 18. 이전 1 다음