TIL 6주 5일차

useState('초기값') => [state데이터, state데이터 변경함수]

->

const [state, setState] = useState(' ');

 

state :

1. 변수 대신 쓰는 데이터 저장공간

2. useState()를 이용해 만들어야함

3. 문자, 숫자, array, object 다 저장가

 

const [state, setState] = useState(['aaa', 'bbb']);  ==> 배열도 가능

 

{state[0]} -> aaa // {state[1]} -> bbb

 

state에 데이터 저장해놓는 이유 : 

웹이 App처럼 동작하게 만들고 싶어서

state는 변경되면 HTML이 자동으로 재렌더링이 된다. 그냥 변수는 변경되어도 자동 재렌더링이 안됨

 

state 변경하는법 (등호로 변경금지)

state변경함수(새로운state) ->ex)  setState(1), setState('바꿀내용'), setState(state + 1)

 

stae변경함수특징 :

기존state === 신규state 의 경우 변경한해줌 -> 에너지 절약의 이유...

state가 array/object면 독립적 카피본을 만들어서 수정해야함

 

const [title, setTitle] = useState(['남자코트 추천', '강남 우동 맛집', '파이썬 독학'])

let copy = [...title]; // 복사본 만들기

        copy[0] = '여자코트추천' // 복사본 title의 첫번째 배열 바꾸기(남자코트 추천 -> 여자코트 추천)

        setTitle(copy);  // 해당 내용 copy로 바꿔주기

.

 

---

[Redux]

1. 코드의 복잡성을 어떻게 낮출 것인가?

2. 리덕스는 이 코드의 복잡성을 낮춰주고, 어떤 결과를 가져올지 예측가능하게 만들어준다.

3. 리덕스의 특징 1. Single Source of Truth

- 1개의 상태 2. 1개의 state에 모든 데이터를 넣는다.

3. 인가된 담당자(특정 함수)를 통해서만 값을 수정한다.

- 개발자가 직접 값을 수정할 수 없다.

- reducer - dispatcher

4. 데이터를 가져 갈 때도, 함부로 가져가지 못한다.

- 데이터를 외부에서 직접적으로 제어 할 수 없다.

- 예기치 않게, state가 바뀌는 것을 사전에 차단하여서, 예측 가능하도록 한다.

5. state 값이 바뀔 때 마다, 전화를 걸어서, 데이터가 바뀌었으니, 자기가 해야할 일을 하도록 하라고 말해준다.

- 각각의 애플리케이션은 서로에게 신경 쓸 필요 없이 자기 할 일 만 하면 된다.

6. Undo / Redo 를 쉽게 할 수 있다.

- 값을 바꿀 때, 원본을 직접 바꾸지 않고, 원본을 복제하고, 복제한 데이터를 수정해서, 새로운 원본으로 만드는 방법을 채택

7. 이전의 상태에 대해서도 디버깅을 할 수 있다.

8. 모듈 리로딩

 

------

1. submit을 눌렀을 때, 객체 하나를 전송한다. 이때 이 객체를 action이라고 한다.

2. 이 action은 dispatch에 전달된다.

3. dispatch는 2가지 일을 한다.

- reducer를 호출해서, state 값을 바꾼다.

- reducer에 현재의 state 값과, action을 값이 주어진다.

- reducer의 return 하는 객체는 state의 새로운 값이 된다.

- reducer는 state를 입력 값으로 가지고, action을 참조해서, 새로운 state 값을 만들어서, return 해주는 state를 가공해주는 가공자이다.

- 이후, subscribe를 이용해서, render를 호출한다.

- 새로운 state에 맞게 UI가 변한다.