몇날 며칠 의미를 헤맸던, 리액트 props, state에 대하여
알아보자
그걸 알아보기전에 리액트가 왜 등장했는가? 에 대해서
먼저 살펴 볼 필요가있다.
도구를 사용함에있어 왜 사용해야하는지 그래서 어떤게 좋은지
명확하게 얘기할수있다면 제대로 도구를 잘 활용하고 있다라고
할수있으니까 말이다.
리액트는 점점 확장 되어가는 웹앱플리케이션에 의해 대응하기위해
페이스북에서 만든 자바스크립트 라이브러리다.
리액트의 장점은 페이지별,기능별 모두 쪼개놓은 하나의 Component를
부모 컴포넌트에서 참조하여 사용하게 된다.
쪼개진다는것만으로도 앞으로 어떻게 설계를 해야할지, 어떻게 해야
리액트를 의미에 맞게 사용되어지는건지 고민해야할것이다.
하나의 컴포넌트를 이루는 과정에서
if ~~한다면
현재 내가 짠 로직이 반복적인 작업을 하는 기능이라면,
여러번 재사용해야하는 기능이라면,
그 코드를 어떻게하면 활용할수있을까? 하는 당연한 생각이 들것이다 .
그도 그렇듯,
리액트에서는 props라는 객체가 존재한다.
Props는 봐도봐도 헷갈리는 부분이이었다.
코드를 보자
선언되었고
Comment의 Component로 넘겨줄려고 한다.
특정한 어떠한 부분의 값만 넘겨주고싶을때
변수안에 값을 할당해주고
이렇게 Comment.js < 컴포넌트에서 값을 받아주면
list들이 업데이트 될때마다 실행하게 하는 새로운 Component를 만들게 된것이다.
state는 무엇인가?
state는 객체로써
값을 담아놓고 참조하여 사용하거나
담아 놓을 값을 선언해놓거나 등
필요한 부분을 내가 정하여 핸들링 하게하는 즉 지금현재 상태를 의미한다
state는 불변성이라서
반드시 setState를 써서 값을 바꿔야한다
state를 먼저 선언해주고 setState로 활용해서 사용할수있게 된다
단, 한번만 사용 할수있다
state는 따로 선언해주지 않아도 함수에서 추가해줄수도 있지만,
명시적으로 코드가 헷갈릴수있기떄문에
선언해주고 사용하는걸 권장한다 !
