방구석 개발자의 놀이터

key값을 이용해서 의도적으로 컴포넌트를 언마운트 시켜야 할 때가 있다. export default function App(){ return( 사용자 상세 정보 ); } function UserDetail({user}){ // 여기에 상태값들이 있다고 가정하자 } 다음과 같이 사용자 정보를 받아서 렌더링을 하는 UserDetail 컴포넌트가 있다고 가정하자 이떄 UserDetail 함수에서 관리하는 상태값들이 있다고 가정할 때 그 상태값들은 해당 유저에 대한 상태값으로 부모로부터 넘어오는 user 데이터가 변경됐을 때 UserDetail함수 안의 상태값을 초기화 해야한다. 이 때, export default function App(){ return( 사용자 상세 정보 ); } function UserDe..

React DOM 요소에서 반복되는 요소에 key값을 넣어주는게 렌더링에서 효율적이다. 아래의 예제로 확인해보자! if(flag){ return( 사과 바나나 ); } else { return( 사과 파인애플 바나나 ); } 위와 같이 flag 조건에 따른 렌더링을 할 때 리액트는 이전의 돔과 비교해서 다른 점을 렌더링해주는 특징이 있다. 이전 돔과 비교할 때 순서를 기준으로 비교한다. 즉, 사과 바나나 순서에서 사과 파인애플 바나나 순서로 비교해서 따라서 위와 같이 조건에 따라 변한다면 파인애플과 바나나가 새로 렌더링된다. 하지만! 우리 입장에서는 파인애플만 추가된건데 굳이 바나나까지 새로 렌더링 된다면 비효율적이다! (물론 예제처럼 몇 안되는 돔 요소면 성능 차이는 없겠지만 복잡한 연산의 렌더링일 경..