docs: [11/26 스터디 1회차] 1장 내용 정리 #6

ella-yschoi · 2024-11-25T14:59:42Z

Description

개발을 역사처럼 공부하는 것을 좋아하는데, 초반에 상태 관리 필요성의 유래(?)를 설명해주어서 좋았습니다.
자주 사용하던 useState를 더 깊게 알 수 있어 좋았습니다.
평소 useReducer에 대해 잘 몰랐는데, 덕분에 깊이 알아갈 수 있었어요.
회사 코드 일부를 가지고 고민/응용해 보았습니다. (내일 가서 고민해봐야징!)
2회 차 부터는 더 미리미리 준비하기 ....... 🥺

joooonis · 2024-11-25T15:15:49Z

최연수/01_리액트_훅을_이용한_마이크로_상태_관리.md

+
+> [!NOTE]
+> `useState` 를 사용한 경우: 컴포넌트 `내부`에 state 업데이트 로직이 존재 <br/>
+> `useReducer` 를 사용한 경우: 컴포넌트 `외부`에 state 업데이트 로직이 존재 <br/>


좋은 포인트인거 같아요 👍

haryan248

책의 내용을 본인의 말로 표현해서 정리해주신게 좋았어요

haryan248 · 2024-11-26T12:20:39Z

최연수/01_리액트_훅을_이용한_마이크로_상태_관리.md

+
+그래픽 요소들은 보통 실시간으로 업데이트되며, 사용자 입력, 애니메이션, 렌더링 데이터 등이 서로 긴밀하게 연관되어 있다. 예를 들어, 한 컴포넌트에서 발생한 사용자 입력이 다른 컴포넌트의 애니메이션이나 그래픽 표현에 즉각적인 영향을 미칠 수 있다.
+
+우리 서비스 로직도 지금보다 더 그래픽 요소들이 많아질텐데, 그땐 전역 상태 관리를 더 신경써서 해야겠다. 그렇지 않으면 데이터 동기화 문제가 발생할듯..


저도 한번 겪었습니다

haryan248 · 2024-11-26T12:22:32Z

최연수/01_리액트_훅을_이용한_마이크로_상태_관리.md

+
+책 내용 중에 "리액트 훅 함수가 여러번 호출되더라도 일관되게 동작할 수 있도록 '충분히' 순수해야 한다" 라는 부분을 읽고 처음엔 읭? 했다.
+
+차근차근 이해하니 순수 함수의 그 순수라기 보다, React hook은 상태 관리와 side effect 처리를 위해 설계되었기에 완벽한 순수 함수는 아니고 (애초에 그럴 수 없고), **예측 가능하고 일관된 동작을 보장**하는데에 포인트가 있다.


저는 순수함수의 순수와 비슷한 의미로 해석했는데 다르게 느끼셨나요?

오, 좋은 질문 감사합니다. 말씀하신 것처럼 일반 함수와 리액트 훅 함수에서의 '순수'의 본질은 같죠. 다만, 순수를 바라보는 시각이 조금 다르다는 의미였어요! 아래와 같이 정리해 보았습니다.

일반 함수에서의 순수 함수: 외부 상태를 변경하지도 않고, 외부 상태에 의존하지 않음, 입력 값만으로 결과를 결정함

리액트 훅 함수에서의 순수 함수: 동일한 입력 값에 대해 항상 동일한 결과를 반환해야 하나, 훅 자체는 상태를 조작하거나 외부 의존성에 의존할 수도 있음. 따라서 Side Effect를 100% 막는 것은 어려운..

haryan248 · 2024-11-26T12:22:50Z

최연수/01_리액트_훅을_이용한_마이크로_상태_관리.md

+
+위 코드에서 `heavyComputation`은 시간이 오래 걸리는 함수다. `useState`에 이 함수를 초기화 함수로 전달하면 컴포넌트가 처음 렌더링될 때만 이 함수가 호출되어 상태의 초기값을 계산한다. 이후 컴포넌트가 다시 렌더링될 때는 이 함수를 다시 호출하지 않으므로 성능에 이점이 있다.
+
+쉽게 말하자면, 필요한 시점에 계산되는 것이다. 첫 렌더링 될 때와 매 랜더링 될 때마다 호출 - 두 개를 비교하자면 아래와 같다.


haryan248 · 2024-11-26T12:24:26Z

최연수/01_리액트_훅을_이용한_마이크로_상태_관리.md

+
+### 왜 'action' 인가?
+
+action은 stae를 어떻게 변경할지 설명하는 정보를 담고 있다. reducer 함수는 `(state, action) => newState` 형태로, 현재 state와 action을 받아 새로운 상태를 반환한다. literally, state를 newState로 반환하는 action이고 상태 변경을 지시하는 역할.


오타있습니다!

호호 감사합니다요 👍

jhlee0409

실무에 연관된 코드를 예시로 드니 더 정리가 깔끔하게 되는거 같습니다!!
수고하셨습니다 👍👍

jhlee0409 · 2024-11-26T12:39:03Z

최연수/01_리액트_훅을_이용한_마이크로_상태_관리.md

+만약 `handleUpload`와 `handleDrop`를 별도의 hook으로 분리한다? 어차피 이 컴포넌트에서만 사용되는 특정 로직이라면 재사용성은 높아지지 않으면서 코드 구조만 복잡해진다. 그냥 컴포넌트 내부에 유지하는 게 더 유지보수하기 편하다고 볼 수 있다.
+
+반대로, 두 로직이 다른 곳에서도 쓰일 예정이며 파일 업로드 과정에서 상태를 관리한다면 위와 같이 custom hook으로 분리하는 게 적합할 것이다.


동일한 의견입니다!

네 의견 감사합니다! ☺️

SangWoo9734

수고많으셨습니다! 내용 정리가 깔끔해서 책 내용을 복기하면서 이해하기 좋았습니다!

SangWoo9734 · 2024-11-26T13:01:06Z

최연수/01_리액트_훅을_이용한_마이크로_상태_관리.md

+};
+```
+
+지연 초기화(Lazy Evaluation)에 대한 책의 설명이 이해가 어려워 더 풀어서 설명해 보겠다.


설명이 너무 좋은 것 같습니다..!

코멘트 감사합니다, 상우님! 🤗

samseburn

수고하셨습니다 👍👍

책을 꼼꼼히 읽으시고 소화하시려는 게 정리하신 글에 보였어요 🥹👍
그리고 실무 코드와 같이 고민하신 지점들 스터디 시간에 공유해주신 게 좋았습니다!

jangsumin

발표를 들으면서 개발을 역사처럼 공부하시는 걸 좋아한다는 말이 무엇인지 알게 된 것 같아요...! 더불어 실무에서 고민하시는 부분을 들을 수 있어서 좋았고, 한 주간 고생하셨어요!! 😁

ella-yschoi added 2 commits November 25, 2024 23:54

chore: Add .gitignore

6654e11

docs: Add 01_리액트_훅을_이용한_마이크로_상태_관리.md

cde2024

ella-yschoi added the 1회차 1장 label Nov 25, 2024

ella-yschoi self-assigned this Nov 25, 2024

ella-yschoi requested review from haryan248, jangsumin, samseburn, jhlee0409, nayoung3669, SangWoo9734, joooonis and hovelopin as code owners November 25, 2024 14:59

joooonis approved these changes Nov 25, 2024

View reviewed changes

haryan248 approved these changes Nov 26, 2024

View reviewed changes

jhlee0409 approved these changes Nov 26, 2024

View reviewed changes

haryan248 added the 발표자 label Nov 26, 2024

SangWoo9734 approved these changes Nov 26, 2024

View reviewed changes

samseburn approved these changes Dec 1, 2024

View reviewed changes

jangsumin approved these changes Dec 1, 2024

View reviewed changes

ella-yschoi merged commit aa09095 into main Dec 2, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: [11/26 스터디 1회차] 1장 내용 정리 #6

docs: [11/26 스터디 1회차] 1장 내용 정리 #6

ella-yschoi commented Nov 25, 2024 •

edited

Loading

joooonis Nov 25, 2024

haryan248 left a comment

haryan248 Nov 26, 2024

haryan248 Nov 26, 2024

ella-yschoi Nov 26, 2024

haryan248 Nov 26, 2024

haryan248 Nov 26, 2024

ella-yschoi Nov 26, 2024

jhlee0409 left a comment

jhlee0409 Nov 26, 2024

ella-yschoi Nov 26, 2024

SangWoo9734 left a comment

SangWoo9734 Nov 26, 2024

ella-yschoi Nov 27, 2024

samseburn left a comment

jangsumin left a comment


		그래픽 요소들은 보통 실시간으로 업데이트되며, 사용자 입력, 애니메이션, 렌더링 데이터 등이 서로 긴밀하게 연관되어 있다. 예를 들어, 한 컴포넌트에서 발생한 사용자 입력이 다른 컴포넌트의 애니메이션이나 그래픽 표현에 즉각적인 영향을 미칠 수 있다.

		우리 서비스 로직도 지금보다 더 그래픽 요소들이 많아질텐데, 그땐 전역 상태 관리를 더 신경써서 해야겠다. 그렇지 않으면 데이터 동기화 문제가 발생할듯..


		책 내용 중에 "리액트 훅 함수가 여러번 호출되더라도 일관되게 동작할 수 있도록 '충분히' 순수해야 한다" 라는 부분을 읽고 처음엔 읭? 했다.

		차근차근 이해하니 순수 함수의 그 순수라기 보다, React hook은 상태 관리와 side effect 처리를 위해 설계되었기에 완벽한 순수 함수는 아니고 (애초에 그럴 수 없고), 예측 가능하고 일관된 동작을 보장하는데에 포인트가 있다.


		위 코드에서 `heavyComputation`은 시간이 오래 걸리는 함수다. `useState`에 이 함수를 초기화 함수로 전달하면 컴포넌트가 처음 렌더링될 때만 이 함수가 호출되어 상태의 초기값을 계산한다. 이후 컴포넌트가 다시 렌더링될 때는 이 함수를 다시 호출하지 않으므로 성능에 이점이 있다.

		쉽게 말하자면, 필요한 시점에 계산되는 것이다. 첫 렌더링 될 때와 매 랜더링 될 때마다 호출 - 두 개를 비교하자면 아래와 같다.


		### 왜 'action' 인가?

		action은 stae를 어떻게 변경할지 설명하는 정보를 담고 있다. reducer 함수는 `(state, action) => newState` 형태로, 현재 state와 action을 받아 새로운 상태를 반환한다. literally, state를 newState로 반환하는 action이고 상태 변경을 지시하는 역할.

		만약 `handleUpload`와 `handleDrop`를 별도의 hook으로 분리한다? 어차피 이 컴포넌트에서만 사용되는 특정 로직이라면 재사용성은 높아지지 않으면서 코드 구조만 복잡해진다. 그냥 컴포넌트 내부에 유지하는 게 더 유지보수하기 편하다고 볼 수 있다.

		반대로, 두 로직이 다른 곳에서도 쓰일 예정이며 파일 업로드 과정에서 상태를 관리한다면 위와 같이 custom hook으로 분리하는 게 적합할 것이다.

docs: [11/26 스터디 1회차] 1장 내용 정리 #6

docs: [11/26 스터디 1회차] 1장 내용 정리 #6

Conversation

ella-yschoi commented Nov 25, 2024 • edited Loading

Choose a reason for hiding this comment

haryan248 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jhlee0409 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SangWoo9734 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

samseburn left a comment

Choose a reason for hiding this comment

jangsumin left a comment

Choose a reason for hiding this comment

ella-yschoi commented Nov 25, 2024 •

edited

Loading