팀과제 준비

Noa·2022년 12월 4일

React

목록 보기

19/22

Q1. 컴포넌트 A는 리덕스 스토어를 구독하고 있습니다. 리덕스에 저장된 데이터가 변경되었을 때(A가 구독 중인 값이 변경되었다고 가정합니다.), 어떤 과정을 거쳐 컴포넌트 A가 변경된 값을 가져올 수 있는지 흐름을 그려볼까요

A Component에서 Store에 있는 구독중 -> A Component에서 Action dispatch -> Ruducer에서 새로운 상태 값을 만든다 (실제 데이터 수정이 일어난다) -> 변경된 새로운 상태 값은 store에 저장된다. -> Store에서 구독중인 component에 수정된 데이터를 넘겨준다 -> A component Re-rendering -> Dom에 변경된 data 확인

컴포넌트에서 action이라는 객체를 통해서 변경된 state를 dispatch.

                     ⬇️

redux store 내의 action 함수에서 state를 reducer로 보냄.

                     ⬇️

reducer에서 state를 가공하여 return한 후, component가 update.

클라이언트가 [Deposit $10] 을 버튼을 누릅니다.

그럼 [Click] 이벤트가 발생하게 되며, [Event Handler]에 있는 [Dispach]가 {Action: Deposit, payload:$10} 이라는 [Action(명령지)]을 담아 [Store] 안에 있는 [Reducer]에게 정보를 보냅니다.

그럼 [Action(명령지)] 를 받은 것을 토대로 [State]에 있는 값을 꺼내어 요청한 [Action(명령)]을 수행 후 $10라는 값이 다시 [State]에 씁니다.
(이 때 기존에 가지고 있던 [State]<$0>는 사라지며, 동일한 이름으로 다시 새로 쓰여지게 되는 겁니다.)

그리고 변경된 State 값으로 다시 UI가 보여지게 됩니다.

Q4. 새로고침 시에도 리덕스 내의 데이터를 유지하려면 어떤 방법을 써야할까요?

예시 ) React로 개발 중인 쇼핑몰 웹에서 redux를 사용하고 있다
상품 상세 페이지에서 옵션을 선택해서 장바구니에 담기를 했을 때
장바구니에 넣은 데이터를 redux에서 가지고 있고 싶다

1.서버로 보내서 데이터베이스에 저장

(HTML5 이전에는 서버에게 응용프로그램이 데이터를 요청할 때마다 쿠키(cookie) 라는 곳에 정보를 저장했다. 쿠키 -> 4KB

HTML5 부터 서버로 정보를 절대 전송하지 않으면서, 클라이언트에서 데이터를 저장하고 꺼내고 싶을 때 꺼내는 저장소인 웹 스토리지가 생겼다.)

2.웹 스토리지에 상태 저장하기

(브라우저가 가지고 있는 임시 저장공간)
local Storage(브라우저의 자체 데이터 베이스, 브라우저 청소를 하지 않는 이상 사라지지 않음, 5MB의 텍스트를 저장할 수있음)
Session Storage(브라우저를 종료하면 저장된 데이터가 사라지는 휘발성 저장공간, 5MB의 텍스트를 저장할 수있음)

그렇다면 우리는 무엇을 익혀야할까?

(어떻게 데이터를 저장하고 가져오기)

추가 +)
useEffect() hook을 사용하여 상태 값이 병경될 때마다 로컬 스토리지에 해당 값이 저장되도록 useEffect() 훅 함수로직을 구현하여 호출하여 사용

Redux persist??

배경?
리액트에서 상태관리를 사용할 때, 주로 리덕스를 사용한다. 이 리덕스를 사용할 때, 새로고침 버튼을 누르게 되면 저장되어있던 상태가 모두 초기화 되는 것을 확인할 수 있다.
새로고침으로 인해 데이터가 모두 증발하게 되면 페이지가 제대로 렌더링이 되지 않거나 데이터를 가져오지 못해 에러가 발생할 수 있다.
이를 미연에 방지하고자 Redux persist를 활용하여 에러를 방지할 수 있다.

redux-persist 라이브러리는 redux에서 localstorage와 sessiongstorge에 state를 저장하고 reducer를 업데이트하게 해주는 기능을 제공한다.

rudux-persist 는 패키지임 yarn add redux-persist 패키지 설치 후 사용
persist 사용법은 구글링 하면 많이 나와있음.
configStore.js 부분과 index.js

redux-persist를 사용하면 리덕스에 있는 데이터를 localStorage 나 sessionStorage에 저장한다. 그래서 새로고침을 해도 데이터가 사라지지 않고 기존의 데이터를 불러올 수 있다.

https://www.saichoiblog.com/react-localstorage/
https://11001.tistory.com/191
https://www.daleseo.com/react-hooks-use-web-storage/
https://velog.io/@pongdang/React%EC%97%90%EC%84%9C-lo%EB%A1%9Ccal%EC%BB%ACS%EC%8A%A4to%ED%86%A0ra%EB%A6%ACge%EC%A7%80-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0

Q1. useEffect가 클래스형 컴포넌트의 어떤 생명주기 메소드들을 대체 하는가?!

useEffect 훅이란??

컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 훅
라이프 사이클을 대체하는 훅

사용방법은?

첫번째 인자(effect)는 함수, 두번째 인자는 배열(deps)이 들어간다

useEffect(effect,[,deps])

class 컴포넌트 때는 라이프사이클이 컴포넌트 중심에 맞춰져 있었다.
클래스가 마운트 되려할 때(componentWillMount),마운트 되고 나서(componentDidMount), 업데이트 되었을 때(componentDidUpdate), 언마운트(componentWillUnmount) 될 때 실행되었다.

그러나 오늘날 많이 사용하는 함수형 컴포넌트에서는 조금 다르게 적용한다. 특정 데이터에 대해서 라이프사이클이 진행된다. 데이터는 여러 개일 수 있으므로, 클래스 컴포넌트에서는 componentWillMount, componentDidMount, componentDidUpdate, componentWillUnmount를 컴포넌트 당 한 번씩만 사용했다면, useEffect는 데이터의 개수에 따라 여러 번 사용하게 된다.

useEffect(() => {
  console.log('hidden changed');
}, [hidden]);

위 코드는 컴포넌트가 첫 렌더링 될 때 한번 실행되고, 그 다음 부터는 의존성 배열안에 hidden의 상태가 바뀔 때마다 실행된다. 즉, componentDidMount와 componentDidUpdate가 합쳐진 셈

useEffect(() => {
  console.log('mounted');
  return () => {
    console.log('unmount');
  }
}, []);

만약 마운트 될 때 처음 한번만 실행하고 싶다면 (componentDidMount) 의존성배열에 빈 배열을 넣어주면된다. deps가 없으므로, 변경되는 것이 없고 처음 한 번만 실행되고 나서는 재실행이 될 일이 없다.

그렇다면 추가적으로 여기서 componentDidUpdate의 역할만 하고 싶다면?
=> useEffect는 기본적으로 componentDidMount와 componentDidUpdate의 역할을 동시에 수행하므로, componentDidMount의 역할을 제거하거나, 무시 해야한다.
=> 이를 위해서는 useRef라는 훅의 사용이 필요하다고 한다.

useEffect(() => {
  console.log('hidden changed');
  return () => {
    console.log('hidden이 바뀔 예정입니다.');
  };
}, [hidden]);

[cleanup]
useEffect함수가 다시 실행될 때(실행되기 직전), return 함수를 먼저 실행해 주고 넘어간다.
즉 componentWillUnmount의 역할 담당, return으로 함수를 제공하면 된다.

데이터의 라이프사이클(componentDidMount,componentDidUpdate,componentWillUnmount)이 useEffect를 이용하여 하나로 합쳐놓은 셈이다.

데이터가 여러개라면, 각각의 데이터에 useEffect를 적용하면된다.

React의 Life cycle

두사진을 비교하면서 공부하니 lif cycle과 hook을 이해하는데 많은 도움이 되었음

12/6일 추가+

useEffect의 순서는 어떻게 보장되는가?

=> rendering 과는 다르게 child -> parent 순으로 일어난다
=> 이에 대해서 이해하려면 react가 작업 순서를 어떻게 정하는지 봐야하는데, 지금 단계에서는 조금 deep하게 파고 드는 것이라고 생각이듬. 그냥 저런 순서로 가는구나 하고 큰 흐름만 알고 넘어가자.

https://ko.reactjs.org/docs/hooks-reference.html#useeffect
https://overreacted.io/ko/a-complete-guide-to-useeffect/
https://goddaehee.tistory.com/308
https://www.zerocho.com/category/React/post/5f9a6ef507be1d0004347305
https://jungpaeng.tistory.com/92

Styled-components란?

CSS-in-JS 라이브러리 중에서 가장 널리 사용되고 있는 라이브러리

배경

기존에 웹사이트개발 -> Html,CSS, JS 각자 별도의 파일에 두는 것을 best practice로 여김
=> 모던 자바스크립트 라이브러리가 인기를 끌면서 재활용이 가능한 빌딩 블록으로 분리하여(component)
그 안에 Html,CSS,JS를 몽땅 때려 박는 패턴으로 웹개발의 패러다임이 바뀌고있음.
JSX + CSS-in-JS 를이용하여 이를 구현.

css in javaScript 기술로, JavaScript 내에 CSS를 작성하는 라이브러리
스타일 정의를 CSS파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법

기존 방식(css, scss등의 단점)

대표적으로 2가지

전역관리
css 파일은 전역적으로(Global) 관리해야한다. 다른 디렉토리에서 작업을 하더라도 해당 파일이 또 다른 디렉토리에 영향을 미칠 수 있다. (갑자기 다른 이상한 컴포넌트에서 원하지 않은 스타일이 적용된다든지)
유지보수
전역적으로 관리한다는 것은 모듈화가 미흡하다는 의미 => 작업이 크고 고도화 될수록 유지 보수에 더 많은 시간과 비용을 발생시킨다.

CSS-in-JS의 장점

CSS의 컴포넌트화로 스타일시트의 파일을 유지보수 할 필요가 없다. css 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화한다. (모듈성)
JS 환경을 최대한 활용 할 수 있다.(자바스크립트의 동적인 값들을 온전하게 사용이 가능)
JS 와 CSS 사이의 상수와 함수를 쉽게 공유 할 수 있다. 예를들어 react에서는 props를 활용한 조건부 스타일링이 가능하다.
현재 사용중인 스타일만 DOM에 포함한다.
짧은 길이의 유니크한 클래스를 자동으로 생성하기 때문에 경랑화의 장점이 있다. 클래스명을 해시값으로 자동생성, 클래스명 오염을 방지

CSS-in-JS의 단점

학습 곡선이 더커진다. JS내에서 CSS까지 모두 다뤄야한다. (CSS-in-JS 의 활용은 무궁무진하다. 그만큼 응용하기 어렵다.)
JS파일이 매우 복잡해짐 -> 이름으로 구분하더라도 프로젝트가 커질수록, 컴포넌트가 styled인지 일반 컴포넌트인지 헷갈림
JS 파일 간 중복 디자인이 많이 필요한 경우, 다른 파일에서 스타일 넣은 것들 import 해와서 쓰면 되지만, 그러면 CSS파일 쓰는거랑 큰 차이가 없다. 쓸데없이 라이브러리를 설치하는 것일 수 있음(번들 크기가 커짐)
인터렉션한 페이지일 경우 CSS파일을 따로 관리하는 방법에 비해 느린 성능을 보여줄 수 있다.

=> 이런 단점들을 개선하기 위해 CSS-in-JS에서도 cssfmf SSR방식으로 넣어주는 등 다양한 노력을 이어가고 있다.