action
action 생성자를 호출했을때 type이 담긴 객체{}를 반환해준다.
reducer
store 적용하기
import {reducer as appReducer} from "./app/redux";
reducer를 결합하는 과정에서 기존 reducer 이름으로 사용하게 되면 다른 reducer와 겹칠 수 있는데 이를 해결할 수 있는 방법은 as를 사용하는 것이다.
as를 사용하면 기존 export하던 이름을 변경하여 가져올 수 있다.
dispatch
action 전송하기
dispatch는 store에 있는 state 값을 변경하고자 할 때 사용한다.
useDispatch 라는 hooks을 사용하여 dispatch를 선언해준다.
const dispatch = useDispatch();
useSelector
state를 꺼내서 사용하기
useSelector를 이용하여 어디서나 쉽게 꺼낼 수 있다.
const app = useSelector(state => state.app);
//화살표 함수에서 바로 리턴한것
const app 으로 선언하여 사용하면 app.openSidebar처럼 사용할 수 있으며
const { openSidebar } = useSelector(state => state.app);
chaining 하지 않고 바로 쓰고 싶다면 객체 분해 할당으로 바로 분해해서 사용 가능하다.
styled-components에서 props 여부로 스타일을 다르게 줄 수 있다.
<Container openSidebar={openSidebar}>
</Container>
먼저 제어할 컴포넌트에 props를 넣어준다.
const Container = styled.div`
transform: ${props => props.openSidebar ?
"none" : "translateX(-100%)"};
`
style을 적용하는 곳에 props를 가져와서 삼항연산자로 대입한다.
es6 문법인 백틱(``) 기호 안에 있기 때문에 중괄호 표현법 ${ }을 사용하여 자바스크립트 언어를 사용할 수 있다.
() => {
dispatch()
}
dispatch는 return으로 값을 반환하지 않고 단순히 실행하는 구문이기에 ({}) 리턴하는 소괄호가 필요하지 않다.
첫 til이다 📒
공부하면서 메모했던 것을 다시 옮겨 적는 데에만 두시간이 걸렸다..ㅠㅠ
이해 하는 것과 그걸 정리하는 것은 정말 어마어마한 차이가 나는 것 같다.
하지만 부족한 내용을 다듬고 글로 표현하면서 한번 더 이해 할 수 있고, 다음에 꺼내어 읽기에 편하게 정리해놓으니 좋았다.
앞으로 작성하면서 잘 정리해놓은 좋은 기록물들이 될 수 있었으면 좋겠다.