리액트란??

리액트는 페이스북에서 개발한 오픈소스자바스크립트 라이브러리라고 한다. UI를 만드는데 사용되고, 프론트엔드 개발자들 사이에서 인기있는 라이브러리다. AngularJS, Vue.js도 있다고 한다. 나중에 Vue.js도 한번 공부해보고싶다.

리액트를 딱 처음으로 배울때 익숙하지가 않다보니 친근해지기가 힘들었다ㅠㅠ 지금은 좀 나아졌지만 처음에 그 어색함은 참..

리액트를 배우기전에는 html파일로 작업하고, tag도 넣어주고 그안에 함수도 따로 넣어주고.. 물론 js로도 작업을 하며 dom을 사용하기도 했었다. 내가 구현하는게 정말 간단한 거라면 리액트 없이도 만들 수 있을것이다.

리액트를 배우기전에는 '그냥 html이랑 js랑 잘 쿵짝쿵짝해서 만들면 되는거 아니야??' 라는 생각을 했는데, 점점 배우는게 복잡해지고 리액트를 배우는 순간 아.. 내가 잘못된 생각을 하고 있었구나.. 라는걸 깨닳았다.

리액트는 컴포넌트로 구성되어있는데 거의 컴포넌트로 다 해먹는다고 생각된다. 컴포넌트에는 class형 컴포넌트와 함수형 컴포넌트가 있다. class형 컴포넌트를 사용하면 상태값을 변경시켜 줄수가 있었고, 함수형 컴포넌트는 상태값을 변경시켜줄수가 없다.. 라고 배우다가 아.. 너무 귀찮은데?? 함수형 컴포넌트로 상태값 변경이 가능하면 좋겠다. 라고 생각을했을때 hooks 또한 배우게 되었다.

리액트만 배웠을때에도 와 신세계다 진짜.. 이런 기분이었는데 hooks를 배우고 useState와 useEffect를 사용해서 바로 함수형 컴포넌트에서 사용하니 엄청 편해진 기분이 들었고, 실제로도 그러했다.

컴포넌트를 사용할때 props와 내가 계속말한 state를 사용하게 되는데 두가지 모두 rendering에 영향을 준다.
내가 사용하고 나서 정의한거는
props : 부모컴포넌트가 자식컴포넌트에게 값을 전달해줄때(여기서 값은 함수같은것들) 사용하는것.
state: 컴포넌트가 렌더링 간에 정보를 추적해야 하는 경우에 컴포넌트 자체에서 상태값을 만들어내고, 업데이트시킬때 이럴때 사용하는것 같다. 걍 쉽게 말해서 그 뭐냐 걍 말그대로 상태값 변화하는 값이라고 생각하자.

lifecycle을 통한 작동원리는 다음에 더 추가적으로 써야겠다. 끝