[SEB_FE_45] 2023.05.25 / 리액트 데이터 다루기

리액트 데이터 흐름

리액트는 페이지 단위가 아닌 컴포넌트 단위로 개발

• 앱 만들 때: 컴포넌트 구조로 나누어 상향식으로 개발
• 데이터 흐름(Props): 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하며 이는 하향식
• State: 해당 컴포넌트에서 수정 또는 삭제하기 위해 지정

Lifting State Up

만약 자식 컴포넌트에서 부모 컴포넌트의 데이터를 바꿔야할 상황이 온다면?

• 상태를 변경시키는 함수(handler)를 하위 컴포넌트에 props로 전달해서 해결
• 이를 Lifting State Up라고 표현

const UserAuthForm = () => {
	const [id, setId] = useState('');
  	const [pw, setPw] = useState('');
  
  	const onHandleSubmit
  
  	return (
  		<>
      		<InputWithLabel label="사용자명" value={id} setValue={setId} />
      		<InputWithLabel label="비밀번호" value={pw} setValue={setPw} />
      		<button onClick={onHandleSubmit}>submit</button>
      	</>
	)
}


const InputWithLabel = ({label, value, setValue}) => {
	return (
    	<>
      		<label>{label}</label>
      		<input value={value} onChange={(e) => setValue(e.target.value)} />
	    </>
    )
}

react hook - useEffect

Side Effect가 있는 함수?

함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우

React 입장에서의 Side Effect

• 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나
• 이벤트를 활용해 DOM 직접 조작할 때
• LocalStorage 또는 타이머와 같은 React와 상관없는 API를 사용하는 경우

React는 Side Effect를 다루기 위한 Hook인 Effect Hook을 제공

useEffect

• 첫번째 인자: side effect에 해당하는 함수
• 두번째 인자: 종속성 배열
  • 종속성 배열이 빈배열일 경우: 첫 렌덩링 시 실행됨
  • 종속성 배열에 변수들이 존재할 경우: 변수가 업데이트 될 때 첫번째 인자의 함수가 실행됨
  • 종속성 배열이 없을 경우: 다음 상황에서 첫번째 인자의 함수가 실행됨
    • 컴포넌트가 처음 생성될 때
    • Props가 업데이트 될 때
    • State가 업데이트 될 때

useEffect(() => {
	// ...
}, [])

Loading Indicator

데이터 요청 시 응답이 느릴수 있기에 데이터가 완전히 도착할 때까지 띄우는 로딩화면을 의미