드디어 React 공부를 시작했다! 🥳
Hi, REACT!
리액트 공부를 시작하고 간단한 web app을 만들어 보았다. 기존 vanila JS만 사용하다가 react를 처음 사용하고 든 느낀 부분은 '어, 이게 되네?' 였다.
자바스크립트에서는 없던 개념들이 많았다. 컴포넌트와 state, props, render함수, 컴포넌트화 해서 html 태그 처럼 사용하는 컨셉들이 처음 봤을때는 쇼킹하면서도 생소하게 느껴졌다.
리액트 공식문서의 Main Concept 부분을 읽으며 각각의 개념에 좀 익숙해 지고 나니, 각각의 요소들을 컴포넌트로 만들어 놓고 레고 블럭처럼 필요한 곳에 조립하듯이 사용할 수 있다는 점이 신기했다!!
코드를 작성할 때 생산성이 많이 높아질 것 같다는 생각이 들었다.
html tag안에서 자바스크립트 코드를 쓰는 부분은 spring에서 jsp파일 내에 jstl을 사용하는 문법과 비슷한 것 같기도 하다.
State?
공부하면서 가장 궁금했던 부분이, 왜 state를 직접적으로 수정하지 않는지, setState 함수를 꼭 써야만 하는지? 잘 이해가 안갔다.🙄🙄
state를 직접 수정하는 안되는 이유
react는 state의 변화를 통해 해당 컴포넌트의 변경을 파악한다. 이때 setState를 호출하지 않고 객체를 직접 수정하게되면 react는 해당 컴포넌트가 변경된 것을 알지 못한다. 따라서 실제로 state가 변경되더라도 다시 리렌더링되지 않는다.
리액트가 state를 제대로 업데이트 하도록 하려면, react에게 state가 update 되어야해! 하고 알려주어야 한다. 즉, 명시적으로 setState 함수를 호출해 주어야 한다.
setState는 이렇게 동작한다!
앞서 말했듯 react에서 state를 제대로 update 하려면 setState를 호출해주어야 한다.
react는 setState 함수가 호출이 되면 컴포넌트의 현재 상태와 (this.state), 새로운 상태 (setState 함수의 인자로 전달된 새로운 객체) 두가지를 비교한다.
그 이후, 얕은 비교를 통해 업데이트가 필요한 경우 해당 컴포넌트의 render 함수를 호출해 화면을 update 한다.
setState는 비동기이다!
setState는 비동기로 동작한다. 즉, setState를 호출한다고 해서 무조건 바로 render 함수가 호출되는 것이 아니라, 리액트에 업데이트 요청을 하기만 하고 다른 일을 한다는 이야기다.
React는 성능을 위해 여러개의 setState() 호출을 단일 업데이트로 한꺼번에 처리할 수 있다.
따라서 this.props와 this.state가 비동기적으로 업데이트될 수 있기 때문에 다음 state를 계산할 때 해당 값에 의존해서는 위험하다!
예를 들어, 다음 코드는 카운터 업데이트에 실패할 수 있다.
해결책은 두개의 파라미터를 받는 다른 형태의 setState()를 사용하는 것이다.
이전 state를 첫 번째 인자로, 업데이트가 적용된 시점의 props를 두 번째 인자로 전달해서 사용할 수 있다.
