김민태의 데브캠프 2기 - 실시간 강의(11/07) 정리

• 상태 변화 감지
  • componentDidUpdate(class형 컴포넌트)
    • 상태가 바뀌는 것을 react가 인지할 수 있게 해주는 함수
    • 위 함수는 prevProps를 받을 수 있음
    • class에서의 현재 props와 이전 상태의 props인 prevProps를 비교할 수 있음
  • useEffect(함수형 컴포넌트)
    • 순수하지 않은 코드들을 관리하는 함수
    • API 및 비동기 동작 안에서 사이드 이펙트를 관리하기 위한 것
    • 순수한 코드란(퓨어).. side effect가 없는 함수, 즉 동일한 입력값을 주면 동일한 결과값이 출력되는 것
    • useEffect 마지막의 배열 안의 값이 바뀌면 React가 useEffect 안의 코드를 다시 호출을 보장
    • 따라서 인자값을 하나만 가져 추적이 용이하게 하고, 코드를 명확히 한다.
• 순수 함수
  • side effect가 일어날 수 없는 함수
  • side effect : 의도하지 않은 동작
  • side effect가 없는 코드로 이루어진 함수
  • ex) const add = (a, b) ⇒ a + b;
  • side effect가 없도록 함수를 짜는 것이 좋지만, 일어날 수 밖에 없는 경우가 존재
  • ⇒ side effect(부수효과)가 있는 코드들을 따로 모아서 관리하는 것이 효율적
• 폴더 구조 세팅
  • 파일의 컴포넌트를 밖으로 내보낼 때(export), index.js 파일로 경유하는 과정이 있으면 좋음(권장)\
  • 왜냐하면 변경된 값을 일일이 수정할 필요가 없다.
  • 프로젝트마다 구조가 달라질 수 있으니, 적절히 선택하기
  • 폴더는 소문자로 시작하고, 컴포넌트는 대문자로 시작하는 명명규칙
• useRef(훅), createRef(함수)
  • 훅은 함수 컴포넌트에서만 사용 가능.
  • 따라서 함수형 컴포넌트에서는 createRef가 아닌 useRef 로 사용
    • form 요소 하나당 하나의 Hook이 필요(input 요소의 Real Dom에 직접 접근) 
    • createRef를 함수 컴포넌트에서도 사용은 가능하나, 매우 비효율적
  • 용도에 따른 차이가 존재할 뿐이고, 기능은 사실상 거의 동일
• form vs useRef
  • useRef로 form에서 text를 저장하는 방식
    • text가 바뀔 때마다 useRef로 저장된다면, 글자 하나하나가 바뀔 때마다 계속 이전 값과 바뀐 값을 비교해야 함 -> 매우 비효율적
• map
  • item, index를 이용해 html 구조를 여러 개 띄워야 하는 상황⇒ html 태그 안에 key값을 index로 지정해야 경고가 생기지 않음
  • ex) {items.map((item, index) ⇒ <li key={index}> ….
• 값 상속(props)
  • props는 보통 부모 컴포넌트가 자식 컴포넌트에게 값을 전달할 때 일반적으로 쓰임
  • Q. 자식이 부모에게 값을 전달해줄려면?
    • 가능은 하나, 매우 껄끄러움.
    • 따라서, 되도록이면 부모 컴포넌트에서 값을 다루도록 구조를 설계하는 것이 좋음("내려"준다)

⇒ 효과적인 값 전달을 위해, 그리고 컴포넌트 재사용성을 고려하여 컴포넌트 구조 설계를 잘 하는 것이 좋다.

• prop drilling
  • 부모와 자식 간의 관계가 멀어, 사이의 컴포넌트들이 많이 존재할 때 발생
  • 부모가 원하는 자식에게 값을 전달하기 위해 수많은 컴포넌트들을 거쳐야 함
  • 중간에 값이 바뀔 수도 있어, 매우 좋지 않은 구조

ex) 

 

const A = () => {
    <B index = {index}></B>
}
const B = (index) => {
    <C index = {index}></C>
}
const C = () => {
    console.log(index);
}

 

 

위 코드를 보면, B에서 A로부터 받은 index의 값은 단순히 C로 전달하기 위해 받고 있다.

 

⇒ 해결방안 : 위 구조가 발생하는 데이터들을 따로 관리하여 해당 데이터가 필요한 컴포넌트에게만 데이터 제공(Context Api)

• Context api
  • Context라는 객체로 데이터를 묶어서 쓸 수 있게 해주는 형태
  • 보통 제공해주는 Provider는 최상위 폴더에 위치해야함
  • 상태관리 기능도 제공을 해 주지만, 이외에도 다양한 기능을 가지고 있음
• context api 사용법
  • createContext import
  • createContext() 함수를 지정하는 변수 선언
  • 파라미터로 {children} 선언
  • return 에서 자식 요소에 전달해주기 위해 위에서 지정한 변수에 .Provider로 태그 이름 설정
  • ex) <TodoContext.Provider></TodoContext.Provider>
  • value로 값 전달
  [자식]
  • 부모에서 전달해준 값을, useContext 메소드로 뽑아올 수 있음.
  • ex) const {todoText, setTodoText, addItem, deleteItem } = useContext(TodoContext)