백준 문제풀기 (그리디[18/50] → 탐색[12/50] → 동적프로그래밍[12/50])
React로 NodeBird SNS 만들기 by ZeroCho 🔗
useCallback
은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용한다. 한번 만든 함수를 필요할때만 새로 만들고 재사용하는 것은 중요하다. 주의해야 할 점은, 함수 안에서 사용하는 상태 혹은 props가 있다면 꼭, deps
배열안에 포함시켜야 된다는 것이다. 만약에 deps
배열 안에 함수에서 사용하는 값을 넣지 않게 된다면, 함수 내에서 해당 값들을 참조할때 가장 최신 값을 참조 할 것이라고 보장할 수 없다. 그래서 반드시 props로 받아온 함수가 있다면, 이 또한 deps
에 넣어주어야 한다.Redux vs Context API
리덕스 장점: 에러 추적이 쉽다
리덕스 단점: 코드량이 늘어난다
둘의 차이점: 비동기를 처리할 수 있냐 없냐
비동기를 다룰때는 3가지 기억 그리고 항상 실패를 대비해야한다
요청 - 데이터 보내줘 요청
성공 - 데이터를 받는다
실패 - 에러 핸들링
왜 객체를 항상 새로 만들어줄까?
우리가 원하는 것은 데이터를 기록으로 남기는 것이다
같은 참조 안에서 데이터를 변경하면 history가 남지 않게 된다
하지만 새로 객체를 계속 생성하면 계속 history를 쌓을 수 있다
그렇다면 왜 변경되지 않는 부분은 새로 다 작성 안하고 ...(비구조화 할당)를 사용할까?
[JavaScript] 비동기 처리와 자바스크립트 엔진의 동작 🔗
클래스 컴포넌트와 함수 컴포넌트 🔗
흔히 한국에서는 클래스형, 함수형 컴포넌트라고 말하지만 공식 문서에 따르면 클래스, 함수 컴포넌트가 옳바른 표현이다 👀
클래스 컴포넌트: React Life Cycle과 State를 사용할 수 있다
함수 컴포넌트: 클래스 컴포넌트 보다 메모리를 덜 사용한다.
React hooks의 등장
함수 컴포넌트는 클래스 컴포넌트보다 효율이 좋다. 이유는 상태를 사용하지 않고 Life Cycle을 사용할 수 없기 때문이기 때문에 당연한 결과였다.
이러한 함수 컴포넌트의 단점을 해소하기 위해서 19년 초에 React Hooks가 업데이트 되었다.
Hooks의 간단한 개념은 함수 컴포넌트에서도 React Life Cycle, State를 사용할 수 있게 한다는 것이다.
Hooks를 더 알아보자
클래스형 컴포넌트는 다른 말로 Stateful 컴포넌트, 함수 컴포넌트는 Stateless 컴포넌트라고 하기도 한다. 클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 stateful로 불리는 것이며 상대적으로 복잡한 UI 로직을 가지고 있다. 반면 함수형 컴포넌트는 state를 사용하지 않고 단순하게 데이터를 받아서 (props) UI에 뿌려주기 때문에 stateless라고 불리는 것이다.