react 3

[React] React에서의 Key

Key가 왜 필요할까? 리액트에서 배열을 렌더링할 때, 의도하지 않는 방식의 결과가 나타나거나 비효율적인 동작을 막기 위해서 키가 사용된다. Key를 따로 지정하지 않으면 index값이 key로 지정된다. 리스트나 아이템이 고정되어 변경이 일어나지 않는 경우엔 index를 Key로 사용해도 무방하다. 하지만, 리스트가 수정, 재배치되거나 필터가 될 여지가 있다면 index를 사용하는 것은 좋지 않다(이 경우 고유한 문자열을 사용하는 것이 가장 좋다). 추가로 key의 값은 서로 다른 리스트의 요소라면 같아도 상관없다. 한 리스트 내에서만 겹치지 않으면 된다. React에서의 Key의 역할에 대해 더 자세히 알고 싶다면 다음의 리액트 공식 문서를 참조하자 :) https://ko.reactjs.org/do..

react 2022.09.27

[react] useEffect() 사용법

며칠 다른 거 하다 다시 돌아왔더니 그새 useEffect() 얘가 뭐하는 애더라... 이러고 있는 나를 보게 됐다ㅠㅠ 이제 이런 건 좀 기록을 하자..!!! 암튼, useEffect는 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 react의 Hook이다. 컴포넌트가 마운트(mount) & 언마운트(unmount) 됐을 때, 그리고 컴포넌트가 업데이트 됐을 때 특정 작업을 실행 및 처리할 수 있다. useEffect를 사용하는 과정에서 내가 헷갈렸던 부분은 어떻게 하면 처음 한 번만 실행하거나 특정 이벤트 발생시에 실행하는지였는데, 이는 다음과 같다. 기본 형태 : useEffect(function, deps) 1. 컴포넌트가 처음 mount됐을 때 한 번만 실행 - deps 위치에 ..

react 2022.01.10