1219 TIL 6699 devLog

오늘 한 것

• 드디어 mypage 카테고리가 변하는 부분과 component가 달라지는 부분을 구현했다.
• mypage, 게시글 페이지 목업 수정
• 게시물/ 명언 바뀌는 토글 작동 구현

Redux사용법

ModalSlice.js

const initialState = { loginModal: false, signupModal: false }; //state2개

const modalSlice = createSlice({
  name: 'modal',
  initialState: initialState,
  reducers: {
    showLoginModal: (state, { payload }) => { //showLoginModal 액션
      state.loginModal = payload;
    },
    showSignupModal: (state, { payload }) => {
      state.signupModal = payload;
    }
  }
});

App.js

  const { loginModal, signupModal } = useSelector((state) => state.modal);
//useSelector로 import없이 state를 불러옴. 그럼 변수처럼 쓸 수 있다.
//useSelector는 조회만 가능함.

LoginModal.js

        <div className={style.textbox}>
          <div className={style.text} onClick={() => {
              dispatch(showLoginModal(false)); //바꾸고싶으면 dispatch
              dispatch(showSignupModal(true));
            }}>회 원 가 입</div>

onClick을 여러개 만들 때

 <li className={style.menus} id={isSelected === 'saying'?
(style.focused_saying):(style.saying)}
        onClick={()=>{SayingClickEvent();
        handleSayingClick()}}>
      나의 명언
</li>

위의 방식으로 두개의 함수를 onClick안에 넣어야하는데

 <li className={style.menus} id={isSelected === 'saying'?
 (style.focused_saying):(style.saying)}
onClick={()=>SayingClickEvent()} onClick={()=>handleSayingClick()}> 
      나의 명언
</li>

이렇게 써서 오류가 났었다 ㅜㅜ

막혔던 것

• 충돌때문에 렌더링이 안되는 오류가 있었다.
• slice를 쓰기전에 복잡한 파일구조(마이페이지)페이지에서 자꾸 state props를 왔다갔다하니까 오류가 어디서 나는지 알아보기가 너무 힘들었다... 킹갓리덕스툴킷..