하루 기록

불필요한 렌더링을 줄이기 위해 사용하는 방법들- React.memo : 컴포넌트 캐싱- useCallback : 함수캐싱- useMemo : 값 캐싱 React.memofunction Box () {     return 박스; }export default React.memo(Box);  ❗함수도 function도 참조형 변수이기에, 만약 아래 예시와 같이 함수를 props로 전달하게 된다면 Parent가 리렌더링될 때 React.memo로 지정한 Box 컴포넌트도 리렌더링이 된다. -> useCallback을 사용하면 렌더링하지 하지 않도록 변경할 수 있다.function Parent () {     const [count, setCount] = useState(5);     const initCount..

useState: 컴포넌트에 state 변수를 추가할 수 있다 (공식 문서)const [state, setState] = useState(initialState);    - initialState : 초기 설정값const [age, setAge] = useState(28);console.log(age); // 28setAge(30); console.log(age); // 30   useEffect: 외부 환경과 같은 생명주기를 가질 수 있다 (공식 문서)useEffect( setup, dependencies? );    - setup : Effect의 로직이 포함된 기능입니다. 선택적으로 정리 함수를 반환할 수도 있습니다.    - dependencies : 값이 변경될 때마다 setup을 실행합니다. ..

순수 함수 : 외부환경에 의존하거나 변경하지 않는 함수비순수 함수 : 외부 환경에 의존 또는 외부 환경을 변경시키는 함수 같은 내용을 행하더라도, 이렇게 보면 다르다.let a = 1;// 순수 함수const sum (num) {    return num + 5;}console.log(sum(a));   // 6// 비순수 함수const sumCopy(){    return a + 5;     // 변수 a에 의존적이다.} console.log(sumCopy());   // 6    같은 행위가 일어나도 외부 환경에 대한 의존성을 낮추기 위해 순수함수와 같이 외부 환경에 의존적이지 않게 짜기 위해 함수형 업데이트를 사용한다. setState는 비동기로 동작하기에 setState 라인에 도착했을 때의 인자..