[React] key값을 이용한 Component Unmount

key값을 이용해서 의도적으로 컴포넌트를 언마운트 시켜야 할 때가 있다.

export default function App(){
    return(
        <div>
            <p>사용자 상세 정보</p>
            <UserDetail user={user} />
        </div>
    );
}

function UserDetail({user}){
  // 여기에 상태값들이 있다고 가정하자
}

다음과 같이 사용자 정보를 받아서 렌더링을 하는 UserDetail 컴포넌트가 있다고 가정하자

이떄 UserDetail 함수에서 관리하는 상태값들이 있다고 가정할 때 그 상태값들은 해당 유저에 대한 상태값으로

부모로부터 넘어오는 user 데이터가 변경됐을 때 UserDetail함수 안의 상태값을 초기화 해야한다.

이 때, 

export default function App(){
    return(
        <div>
            <p>사용자 상세 정보</p>
            <UserDetail key={user.id} user={user} />
        </div>
    );
}

function UserDetail({user}){
  // 여기에 상태값들이 있다고 가정하자
}

컴포넌트의 key 속성을 준다면 유저가 변경되었을 때 상태값이 모두 초기화된다.

 

출처 : 실전 리액트 프로그래밍