[TIL] 240202(금) Error가 나면 코드를 찬찬히 살펴보자...🧐

헤헿 똥멍청이 같은 실수를 했따,,,

멍청한 실수... 2탄...!!

바로 return도 안 하고 왜 안 보임???????? 이러고 있었다!!!

letter 수정하기 버튼을 실행을 하는데,
처음에는 그냥 p 태그로 보여주다가, "수정하기" 버튼을 누르면 textarea 태그로 바뀌어 수정할 수 있도록 하려고 했다!

그래서 겨우 생각을 정리해서, 코드를 짰는데 왜 안 돼!!!

// letter 수정하기
const updateBtnClickHandler = () => {
    updateBtn(id);
};

const updateContent = () => {
    if (isUpdate === false) {
       <StP>{content}</StP>;
    } else {
       <StTextarea>{content}</StTextarea>;
    }
}; 

<StDiv>{updateContent()}</StDiv>
<StBtn onClick={updateBtnClickHandler}>
    {isUpdate ? "수정 완료" : "수정하기"}
</StBtn>

이렇게 버튼을 눌렀을 때는 updateBtn 함수가 실행되면서, isUpdate가 변하면 버튼 문구도 변하게끔 설정을 하고,
해당 {content}에는 {updateContent()} 함수를 실행시키면 되겠다! 라고 생각을 해서 야심차게 작성을 해 보았는데...

엥 왠걸 내 content가 다 사라졌다... 이게 무슨일인고... 아무리 뒤져보아도 맞게 잘 작성한거 같은데 왜지왜지... 하다가
진짜 chapGPT 한테 구구절절 설명해가며 나 이렇게 생각했는데 이게 안 나와... 뭐가 문제야? 라고 물어봤는데
엄청나게 짧은 답변이 날라왔다..

"return 해보세요!"

하하하 그렇다.. if 문에서 함수 다 잘 작성해놓고 return을 안 해서 내 {content}가 안 보이는거였다...ㅋㅋ큐ㅠㅠ

(진심 튜터님한테도 물어보러 가야하니 진지하게 고민하고 있었는데.. 다행이었다..ㅋㅋ)

const updateContent = () => {
    if (isUpdate === false) {
       return <StP>{content}</StP>;
    } else {
       return <StTextarea>{content}</StTextarea>;
    }
}; 

return을 아주 정성스럽게 잘 붙여주니 잘 작동했다...!!! 휴,,, 한 줄 한 줄이 정말 쉽지 않다...

배아직반 보강

context 폴더 > TodoContext.jsx 파일

import {createContext} from "react";

export const TodoContext = createContext();

const TodoProvider = ({children}) => {
return <TodoContext.Provider value= {{}} >{children} </TodoContext.Provider>

};

export default TodoProvider;

// value = {{여기 안에 object로 넘겨 줄 수 있다}}
// ->  전역변수로 사용 가능하다!!

// TodoProvider를 사용해주려면?! root에 씌워준다. App.js에서!!
// App.js
<TodoProvider>
  <Header />
  <Footer />
</TodoProvider>
//=> 최상단에 감싸준다!!

$isDone={isDone} 앞에 $ 표시 붙여주면!!
=> 아 이거는 styled-componet에서 사용하는 props구나 라고 생각함!!
=> styled-component 변수명도 isDone에서 $isDone으로 변경해줘야함!!

Redux 특강

1. State

State 란? 컴포넌트가 갖는 상태

1. 컴포넌트가 소유한 데이터이다.
2. UI를 구성하고, 변경을 일으키는 기준이다!

State의 변경 = UI 변경 by re-rendering
외부의 input, user의 action
배치 업데이트를 통해 변경사항을 한 번에 반영해준다.

todos, counter, input(value, onchange)
: state의 변경떄문에 일어남.

Frontend Development : UI를 변경해주는 역할
-> State의 관점에서 봐야한다.

UI -> 상호작용 -> 변경

2. props

propergation/ property

: 전달 받은 state다. 소유권이 부모, 조상요소에게서 있음.

react는 꼰대 집안이다!! 자식의 말은 절대 부모, 조부모에게 올라갈 수 없다.
부모의 말이 곧 법이다!! 말은 무조건 아래로 흐른다.

prop drilling

1. 유지보수의 어려움
2. 컴포넌트 재사용성 감소
: 공통 컴포넌트가 되기 어려움. 위로부터 props를 계속해서 받아오기 때문
3. 가독성 저하
4. 불필요한 리렌더링
: 성능 저하
5. 추적 및 디버깅 어려움
: 가장 문제. 추적이 매우 어렵다.

re-rendering 되는 조건

1. state가 변경되었을 때
2. 부모컴포넌트가 리렌더링 됐을 때
3. 부모에게서 받는 props가 변경되었을 때

useEffect

순수함수
부수효과(sideEffect)
의존성배열이 바뀜에 따라 리렌더링이 일어난다.

매개변수 : 1) callback 함수 , 2) dependency array

-> 의존성배열에 [첫 번째, 두 번쨰] : 여러 개를 넣을 수도 있따
의존성 배열 비워놓으면 : 최조 렌더링 될때 알려줘

리렌더링 될 때마다 계속 알려줘 = 의존성 배열 없이 사용

React.memo

memoization 개념을 반드시 잘 알자

전혀 새로운 패러다임!

context provider(컨택스트 제공자) <-> context consumer(컨택스트 소비자)
추적 및 디버깅 어려운 거 다 해결 가능..

전역상태
가장 쉬운 방법 : context API를 Index.js에서 사용..!
-> 하지만 여전히 문제점!!

1. 모든 consumer계속 리렌더링
2. 복잡한 스테이트 상태관리가 영 좋지않다.

context API 는 좋아, 근데 state의 개념을 조금 다른걸로 사용해볼까> -> useState 대신에 useReducer를 써보자!

** 스탠다드반 useReducer 강의 듣자!

Context API + useReducer로 관리하자 === redux !!!

redux가 더 먼저 나오고, useReducer가 나중에 나오긴 했음. useReducer가 redux의 방법을 차용해서 만든거임

3. Redux

🚨 이디액타페써스

: 이벤트 -> 디스페치 -> 액션 -> 타입 / 페이로드 -> 리듀써 -> 스토어의 스테이트 변경!