[TIL]21.06.28

👨‍💻 오늘 공부한 것

리액트 state 끌어올리기 (Liffting State Up)구현

: 이는 단방향 데이터 흐름을 가진 리액트에서 자식컴포넌트에서 선택한 무엇의 데이터를 부모컴포넌트에서 알 수 없을때 사용하는 구조이다.

useEffect()

: 컴포넌트가 렌더링된 이후에 비동기적으로 처리되어야하는 부수적인 효과들을 sideEffect라고 한다. 그러한 sideEffect는 대부분 useEffect에서 처리되어야한다.

useEffect(()=>{
	// 사용하고싶은 코드구현
}, [])
// 두번째인자가 빈배열일 경우에 첫렌더링시만 useEffect가 실행됌

const [value, setValue] = useState('');

useEffect(()=>{
	// 사용하고싶은 코드구현
},[value])
// 두번째인자 배열에 state값이 들어가 있을 경우, state값이 새로 갱신될때마다 useEffect가 실행된다.

---

내가 이해한 비동기란, 시간이 오래걸리는 작업을 다른 곳, Event loop로 돌려준다음 처리 중이게 하고, 그 다음코드를 먼저 실행하는 방식인 것 같다. 지금은 그렇게 오래 걸리는 코드가 없어서 setTimeout이란 API로 임의로 시간을 걸어주는 것 같은데.. 아직 더 공부해봐야겠다.

그리고 비동기 함수는 fetch, setTimeout과 같은 메소드들이 있는데, 비동기함수들을 쓸때는 await을 써준다거나 Promise를 사용해서 .then으로 값을 반환하도록 한다. (콜백지옥, 혹은 Promise지옥에 빠지지 않도록)

---

"하기 싫어도 일단은 하고 보자.
감정은 사라지고 결과는 남는다."