이머시브코스 6주차 모음

0329.월

프론트엔드 개발에서의 상태 관리

• 상태는 변하는 데이터 → UI, 프론트엔드 개발에서는 동적으로 표현되는 데이터
• side effect : 함수의 입력 외에도 함수의 결과에 영향을 미치는 요인
  ex) 네트워크 요청, API 호출
• 서로 다른 컴포넌트가 동일한 상태를 다룬다면, 이 출처는 오직 한 곳이어야 함
• 데이터 무결성 : 데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어 안정성을 저해하는 요소를 막고 데이터 상태들을 항상 옳게 유지하는 것
• 상태 관리 라이브러리(React Context, Redux, MobX) 특징

1. 전역 상태를 위한 저장소를 제공
2. props drilling 문제 해결

0330.화

React Hooks

• class를 사용하지 않고도 함수 컴포넌트에서 상태를 사용할 수 있도록 해주는 기능
• Hook은 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수

State Hook

import React, {useState} from 'react';
function Example(){
	const [count, setCount] = useState(0);
}

• useState는 인자로 초기 state 값 하나를 받음
• 배열 구조 분해 문법으로 상태값과 상태를 설정해주는 함수를 다른 변수로 할당받음

Effect Hook

import React, {useState, useEffect} from 'react';
function Example(){
	const [count, setCount] = useState(0);
	useEffect(() => {
		// 브라우저 API를 이용해 문서의 타이틀을 업데이트
		document.title = `You clicked ${count} times`;
	}, [count]) // count가 바뀔 때만 effect 재실행
	// 정리(clean-up)을 이용하는 Effects
	useEffect(() => {
		(...)
		return function cleanup(){ // 컴포넌트가 마운트 해제되는 때에 실행
			(...)
		{
	})
}

• 함수 컴포넌트 내에서 side effects를 수행할 수 있게 해줌(componentDidMount, componentDidUpdate, componentWilUnMount와 같은 목적으로 제공)
• useEffect Hook을 이용하여 컴포넌트가 렌더링 이후에 어떤 일을 수행해야 하는 지를 말함
• 두 번째 파라미터에 배열로 넘겨주어, 해당 값들이 리렌더링 시에 변경되지 않는다면 effect 건너뛰도록 설정 가능

Hook 사용 규칙

• 최상위(at the top level)에서만 Hook을 호출해야 함(반복문, 조건문, 중첩된 함수 내에서 Hook 실행 x)
• React 함수 컴포넌트 내에서만 Hook을 호출해야 함(Custom Hook에서 Hook 호출)

0331.수

HA...

0401.목, 0402.금

리액트..공부..

깃커밋으로 대체

https://github.com/zzangsemin/study-react

🔚

수요일에 테스트를 보았다.. 딱 배운만큼 + 테스트코드 살짝 이해하는 정도로만 나와 그렇게 어렵지는 않았으나 더많은 공부가 필요한것같다ㅜ..ㅜ 목금 솔로스터디여서 나름 알차게 이용해보자라는 마음을 전부터 갖고있었지만 그러지 못한 것 같아 아쉽다