#1 Today I Learned - 21.01.04

Today I Learned 📝

• react-redux: 연결하기
• styled-components: props로 style 제어
• es6: arrow function 구분하기

react-redux : 연결하기

action

action 생성자를 호출했을때 type이 담긴 객체{}를 반환해준다.

reducer

• 인자 값으로 initValue와 action을 받는다.
• reducer에서는 switch문으로 현재 받은 action.type 값을 받아 비교하여 값에 맞는 action을 return 해 준다.
• return 할 때에는 기존 state를 spread 연산자를 이용해 풀어서 넣고 업데이트 할 payload 값을 뒤에 넣어준다.
• 만약 해당하는 action.type이 있으면 기존 state에 추가할 값을 얹어서 return 하면 된다. 없다면 default값으로 기존 state값을 return 해주면 된다.
  
  

store 적용하기

import {reducer as appReducer} from "./app/redux";

reducer를 결합하는 과정에서 기존 reducer 이름으로 사용하게 되면 다른 reducer와 겹칠 수 있는데 이를 해결할 수 있는 방법은 as를 사용하는 것이다.
as를 사용하면 기존 export하던 이름을 변경하여 가져올 수 있다.

1. reducer가 여러 개인 경우 combineReducers 를 사용하여 하나로 결합한다.
2. 결합한 reducer를 최종적으로 createStore로 생성 시켜준다.
3. 생성한 store를 export하고 index.js에 불러와 provider로 <App / >을 감싸준 후 props 값으로 store를 필수로 넘겨주어야한다.
4. 최종적으로 안에서 redux로 state를 관리할 수 있다.

dispatch

action 전송하기
dispatch는 store에 있는 state 값을 변경하고자 할 때 사용한다.

useDispatch 라는 hooks을 사용하여 dispatch를 선언해준다.

const dispatch = useDispatch();

• dispatch()의 인자로는 type이 담긴 action을 넣어주어야한다. (action 생성자는 type이 담긴 plain object를 반환한다.)
• dispatch로 인자에 원하는 값을 넘길 수 있다.
• dispatch는 받은 인자를 reducer로 전송한다. 그러면 reducer는 현재 state와 받은 action을 콜백으로 가지고 있게된다.
• 받은 action이 어떤 type인지 확인해준 후 거기에 맞는 state를 update 된다.
  
  

useSelector

state를 꺼내서 사용하기
useSelector를 이용하여 어디서나 쉽게 꺼낼 수 있다.

const app = useSelector(state => state.app);
//화살표 함수에서 바로 리턴한것

const app 으로 선언하여 사용하면 app.openSidebar처럼 사용할 수 있으며

const { openSidebar } = useSelector(state => state.app);

chaining 하지 않고 바로 쓰고 싶다면 객체 분해 할당으로 바로 분해해서 사용 가능하다.

styled-components: props로 style 제어

styled-components에서 props 여부로 스타일을 다르게 줄 수 있다.

<Container openSidebar={openSidebar}>
</Container>

먼저 제어할 컴포넌트에 props를 넣어준다.

const Container = styled.div`
	transform: ${props => props.openSidebar ?
	"none" : "translateX(-100%)"};
`

style을 적용하는 곳에 props를 가져와서 삼항연산자로 대입한다.
es6 문법인 백틱(``) 기호 안에 있기 때문에 중괄호 표현법 ${ }을 사용하여 자바스크립트 언어를 사용할 수 있다.

es6: arrow function 구분하기

• () => (({})) 객체 리턴
• () => ({}) 객체 {} 를 리턴
• () => {} 함수 내부 (block)
• () => 1 즉시 리턴

() => {
	dispatch()
}

dispatch는 return으로 값을 반환하지 않고 단순히 실행하는 구문이기에 ({}) 리턴하는 소괄호가 필요하지 않다.

review 📃

첫 til이다 📒
공부하면서 메모했던 것을 다시 옮겨 적는 데에만 두시간이 걸렸다..ㅠㅠ

이해 하는 것과 그걸 정리하는 것은 정말 어마어마한 차이가 나는 것 같다.
하지만 부족한 내용을 다듬고 글로 표현하면서 한번 더 이해 할 수 있고, 다음에 꺼내어 읽기에 편하게 정리해놓으니 좋았다.
앞으로 작성하면서 잘 정리해놓은 좋은 기록물들이 될 수 있었으면 좋겠다.