1주차 리뷰

[choisohyun]

이전 리뷰 참고

[choisohyun]

리액트 훅의 규칙

1. 기존 state 객체나 ref 객체를 직접 변경해서는 안된다는 규칙
2. 함수가 여러 번 호출되더라도 일관되게 동작할 수 있게 충분히 순수해야 한다는 규칙

베일아웃

• 동일한 값으로 변경되면 동일한 상태로 판단해 리렌더링을 하지 않는 리액트 기능
• 객체 사용시 { ...state, text: a || b } 형태로 변경하면 다른 값으로 보기 때문에 state를 그대로 반환해야 한다.

---

많이 쓰는 useState, useReducer에 대해 용어로 정리하는 느낌이 들어 좋았습니다. 일본어가 원서여서 번역체가 약간 있는 것 같습니다.

[RAINBOWJYP]

마이크로 상태 관리
책 제목만 봤을 때 상태 관리를 쪼개서 활용한다는건줄 알았다. 그게 아니라 상태 관리를 리액트 훅, 컨텍스트를 활용하여 가볍게 하는 방법이었다. 리액트 useState와 useReducer의 기술적인 내용을 다뤘는데 useReducer의 활용법을 다시 한 번 깨달은 것 같다. useState 범벅인 코드를 useReducer로 분리시켜 관리할 수 있지 않을까?
전역상태 얘기에서 상태 끌어올리기, 내용 끌어올리기 내용이 나왔는데 말이 props drilling이랑 헷갈린다. 그리고 내가 아는 상위 컴포넌트와 책에서 말하는 상위컴포넌트가 다른 것 같다.

<Parent>
 <Child1/>
 <Child2/>
</Parent>

여기서 상위컴포넌트는 <Parent />고 <Child1/> 이 하위 컴포넌트 아닌가? 왜 책에선 반대로 말할까? 잘못알고있나싶다.
전역 상태를 어떤 방법으로 관리할 수 있는지 다음장이 기대된다.

[blan19]

• 리액트를 다루면서 베일아웃이라는 단어를 처음 들어봤네요.. 많이 쓰던 단어라니..!
• useReducer와 useState로 서로를 구현하는 부분이 재밌었습니다. useReducer로 구현하면 외부에서 리듀성와 init을 구현해도 요구에 충족하지만, useState에서는 내부에서 인라인으로 작성해야 구현이 되는 차이가 재밌었습니다

[hamo-o]

사용자 정의 훅 왜 쓸까

1. 네이밍을 통해 더 명확하게 훅을 정의할 수 있다.
2. 컴포넌트와 상태관리 코드가 분리된다. → 컴포넌트를 건드리지 않고도 상태관리 코드에 기능을 추가할 수 있다.

간단한 훅이라면 굳이 래핑해야 할까.. 생각했던 코드들을 되돌아보게 되었습니다.

---

멱등성은 꼭 수학적으로 순수한 함수를 말하는 것은 아니다.

멱등성(idempotent) 이란?
: 어떠한 함수가 수학적으로 순수한 함수는 아니지만 (인수 이외의 다른 요소의 변경으로 결과가 달라질 수 있음),
다른 함수로 특정 변수를 바꾸지 않는 이상 항상 동일한 결과를 얻을 수 있을 때 가지는 성질.

const addBase = ({ number }) => {
	const [base, changeBase] = useState(1);
	return <div>{number+base}</div>;
}

→ addBase 함수는 멱등성을 가진다.
→ 또한 함수 밖에서 changeBase 로 base 변경이 불가능하기 때문에 컴포넌트는 억제되어 있다. 지역성을 보장한다.

멱등성에 대해서 오해를 가지고 있는 부분이었습니다 ㅠ

---

지역 상태를 효과적으로 사용하는 방법

내용 끌어올리기를 하는 경우는,
자신의 자식 컴포넌트 중 부모의 상태에 의존하지 않는 것이 있을 때,
부모의 부모 컴포넌트로 해당 내용을 끌어올려서 내려줌으로써 리렌더링을 방지할 수 있는 경우입니다.

컴포넌트를 어디로 import 해서 배치해야 할 지 모를 때 이 내용을 명심하면 일관성있는 코드를 작성할 수 있을 것 같습니다.

[jisunchung]

베일아웃이라는 단어를 이번 책을 통해 처음알게되었습니다.

• 베일아웃 : 동일한 값인 경우 리렌더링을 발생시키지 않는 것입니다.

useState와 useReducer훅에 대해서 한번 더 정리해볼 수 있는 시간이었습니다.

• useState : 지역 상태를 생성하는 기본적인 함수로 로직을 캡슐화하고 재사용 가능합니다.
• useReducer : useState와 매우 유사하지만, state 업데이트 로직을 이벤트 핸들러에서 컴포넌트 외부의 단일함수로 분리할 수 있다는 차이점이 있습니다.

useState를 useReducer로 구현 가능하고, 그 반대도 구현 가능한 점이 인상 깊었습니다!