학습 내용
프로젝트를 하면서 하루는 프로젝트에 대한 것을 하지 않고 잠시 쉬는 시간을 가지기로 했다. 어떤 것을 할 수 있을지 생각도 좀 해보고 마음을 조금 편하게 보내고 싶었다. 편하진 못하게 다시 앉아서 부족한 것을 찾아보고 뭔가라도 보는게 마음이 편했다. 그렇게 오늘은 React에 대한 부분을 보고 부족한 부분을 메우는 시간으로 사용하기로 했다.
state, props
React에서 props와 state를 다루는 부분을 다시 찾아봤다. state는 컴포넌트에서 사용하는 데이터를 state라고 부른다. state는 변할 수 있는 값이다. 유저의 상호작용하는 데이터로 사용한다. 이런 데이터가 만약에 해당 컴포넌트가 아닌 다른 컴포넌트에서 전달되어진다면 그 데이터는 state가 아니다.
props는 변할 수 없는 값이다. 전해진 데이터를 가지고 사용하기만 할 수 있다. 그래서 state는 컴포넌트 관점에서 보는 것이 더 쉽게 이해될 수 있다. 데이터가 해당 컴포넌트내에서 정의되고 관리되고 사용되고 변한다면 state 이다. 하지만 외부에서 데이터가 전달되어지고 변경이 불가능 하다면 props 이다. 부모 컴포넌트에서 state였다고 해도 자식 컴포넌트에게 전달한다면 자식 컴포넌트에게는 state가 아닌 props인 것이다.
state는 변화를 관리하기 위한 데이터이고 props는 전달된 값을 보여주기 위한 데이터라고 볼 수 있다.
리엑트는 Single Page Application이다. 이를 가능하게 하는 것이 변화를 감지하는 ReactDOM이 있기 때문이다. 가상의 돔이 이전과 비교해서 변화가 있는 부분만 다시 랜더링을 하는 방식이기 때문에 변화가 일어났다고 리엑트가 인지하게 하는 게 중요하다. 변화가 감지되면 render 함수가 호출 되는데 그 변화를 인식시키게 하는 함수가 class component에서는 setState 이고 function component에서는 React Hook의 useState가 된다.
느낀점
다시보면서 정리해야겠다고 했지만 여전히 헷갈리는 부분이 있었고 그 부분이 정리되었다. 다른 사람의 실력을 보면 한참 부족한 실력으로 보이지만 내가 아닌 다른 사람을 보고 기준을 맞추면 어떤 사람을 볼때마다 내 기준이 달라지게 되는 것 같다. 비교하게 되더라도 어제와 오늘과 내일의 나에게 더 집중해서 성장했는가를 더 보아야 기준이 달라지지 않고 계획에도 공부에도 더 적합할 것 같다. 그리고 자신의 흥미를 유지하고 지속하는 부분에서도 나에게 초점을 맞춰야 더 도움이 될 것 같다.
