Props 당신은 누구신가요
Prps는 부모 컴포넌트가 자식 컴포넌트에게 값을 전달 할 때 사용하는것이다.
이렇게 말하면 아무도 와 닿지 않기에 내 나름대로 설명을 해보겠다.
Props는 유산이다. 부모가 자식에게 증여해주는 무엇(돈, 차, 재산..)이라고 설명할 수 있다. 그 증여는 첫번째 후손들에게만 가능하고 만약 손주에게 증여를 하고자 하는 상황이면 아들에게 먼저 증여를 하고 아들이 자식에게 증여하는 방식으로 건내줄 수 있다.
예를들어 부모 컴포넌트에서 {내차 = bmw} 라고 유산을 정해 자식 컴포넌트에 넘겨줬다면 자식컴포넌트에서 {내차} 라는 유산을 사용할 수 있게 되고, 콘솔에는 {bmw}라는 값이 나타난다.
하지만 자식 컴포넌트에서 {내차=bmw}에 대한 유산을 사용만 할 수 있지 수정 할 수 없다.
만약 자손 컴포넌트에서 {내차=bez} 라고 직접적으로 수정을 했다면 이 변경 사항은 부모 컴포넌트까지 영향을 미쳐 부모 컴포넌트 또한 {내차=bez}라고 수정이 될 것이다. 부모님의 차량은 bmw인데 원치 않은 수정이 일어난 것이다!! 자세한 내용은 밑에 다시 설명 하겠다.
State 당신은 누구신가요
State는 함수내 선언된 변수처럼 컴포넌트 안에서 관리되는 상태값이다.
즉 고유의 상태값을 갖고, 컨트롤이 가능하게 되는 것이다. 컴포넌트 내부에서 선언되며 그안에서 상태값을 관리한다. 상태값을 관리하기 위해선 State에 직접적으로 접근하지 않고 setState라는 함수를 통해서 접근하여 상태값을 관리한다. state에 직접적으로 접근하지 않는 이유는 불변성을 지키기 위함이다. 리액트는 자바스크립트 라이브러리이다. 때문에 리액트 또한 레퍼런스형식의 참조를 하고 있기 때문에 직접적 변경이 이루어 지면 그 객체를 참조하고 있는 모든 장소에서 그 영향을 받기 때문에 이 동작은 의도하지 않은 다른 장소에서 변경을 이루어 지게 하는 형식이다. 이런 문제점을 해결하기 위해 setState를 통해 상태 값을 변경하여 객체의 불변성을 지켜준다. '객체의 불변성 지키기'에 장점이 더욱 있지만 다른 포스팅에서 자세히 다뤄보겠다.
생각해보기...
- Props을 전달한 자손에서 Props의 값을 변경해야 할 경우가 생긴다면..?
case1. Props를 그 컴포넌트의 State로 담고 setState로 관리?
case2. 새로운 변수에 props를 담고 그 변수를 변경?
