회원가입 오류메시지를 표시하기 위해 state를 이용하였는데, 자꾸 한템포 늦는 state 때문에 자꾸 애매한 오류가 났었는데 오늘 제대로 state, props에 대해 배워서 드디어 이해가 되었다
state, setState
리액트의 setState는 비동기로 작동한다!!
이러한 작동원리 때문에 한템포 늦는 반응이 나왔던것이다.
setState가 동기로 작동하게되면 값이 변경될때마다 바로 바로 렌더링을 하기 때문에 비효율적이라 setState는 비동기로 작동한다고 설명을 들었다.
따라서 임시 저장소에 모아두었다가 코드를 끝까지 읽고 한번에 바꿔서 렌더링한다
Tip 리렌더가 되는 상황
- 새로운 props가 들어올때
- 부모 컴포넌트가 렌더링 될 때
- 강제 업데이트(forceUpdate)가 실행될 때
- state가 변경될 때
Props
코드를 체계화 하기 위해 폴더 구조를 container / presenter 패턴으로 나누어주었는데, 컴포넌트를 2개로 나누면서 데이터와 기능의 연결고리가 끊어지게 되었다.
이러한 연결고리를 다시 연결해주기 위해 props가 필요하다
props는 부모가 가지고 있는 변수, 함수를 자식에게 물려주는 것이다
부모 컴포넌트가 props를 물려줄때는 객체로 묶어서 넘기게 된다
위와 같이 props를 넘기게 되면, props = { propsName : ... } 형태의 객체로 넘어가게 된다. 또한 객체로 넘어가기 때문에 여러개를 내려줄수도 있다!!
반대로 받아올때는 객체로 넘어오기 때문에 객체의 속성을 꺼내오는 것 처럼 사용해야한다
ex) props.propsName
리액트는 데이터 흐름이 단방향 구조이다..
그래서 부모에서 자식으로 넘기는 방식은 가능하지만 반대로 자식에서 부모로 값을 넘길수는 없다
대신 이러한 구조 때문에 에러를 캐치하기가 더 쉽고, 보기에 깔끔한 장점이 있다
