230713 230714 EmotionDiary-ver2 복습

오늘 이해하고 넘어갈 것:

• handleChangeEmotion 과 onClick props 원리??

useEffect(() => {
    if (initData) {
      setState({
        ...initData, date: getFormattedDate(new Date(parseInt(initData.date)))
      }
      )
    }
  }, [initData])

🧷 React 리액트에서 복수 클래스 사용: join(' ') 사용해 공백 넣기

<div className={['class1', 'class2'].join(' ')}></div>

Context API 3가지 주요 개념

참고링크:
https://cocoon1787.tistory.com/801

🧷 useContext()

createContext(initialValue)

context 객체 생성
createContext 함수 호출 시 Provider와 Consumer 컴포넌트 반환
initialValue는 Provider를 사용하지 않았을 때 적용될 초기값을 의미

Context.Provider

생성한 context를 하위 컴포넌트에 전달하는 역할

Context.Consumer
// useContext 사용 시
const data = useContext(Context);

context의 변화를 감시하는 컴포넌트
설정한 상태를 불러올 때 사용

🧷 JSON.parse()와 JSON.stringify()

참고링크:
https://www.daleseo.com/js-json/
JSON.parse(): JSON 문자열을 JavaScript 객체로 변환

const str = `{
  "name": "홍길동",
  "age": 25,
  "married": false,
  "family": { "father": "홍판서", "mother": "춘섬" },
  "hobbies": ["독서", "도술"],
  "jobs": null
}`;

const obj = JSON.parse(str);

JSON.stringify(): JavaScript 객체를 JSON 문자열로 변환

const obj = {
  name: "홍길동",
  age: 25,
  married: false,
  family: {
    father: "홍판서",
    mother: "춘섬",
  },
  hobbies: ["독서", "도술"],
  jobs: null,
};

const str = JSON.stringify(obj);