doeunn.log

🔎 불변성 ? 사전적으로 불변성이란 값이나 상태를 변경할 수 없는 것을 의미합니다. 이 의미를 정확하게 이해하기 위해 자바스크립트의 원시타입에 대해 먼저 알아보도록 합시다. ❓ 원시타입 vs 참조타입 자바스크립트에서 원시타입에는 Number, Strimg, Boolean, null, undefined, Symbol 참조타입에는 Object, Array가 있습니다. 이때 원시타입은 고정된 크기로 메모리에 저장, 실제 데이터가 변수에 할당되며 참조타입은 데이터 크기가 정해지지 않고 메모리에 저장, 데이터의 값이 heap에 저장되며 변수에 heap 메모리의 주소값이 할당됩니다. 즉, 원시타입들은 불변성을 유지하고, 참조타입들은 변경이 가능한 값들이라는 말입니다. 원시타입은 불변성을 유지한다 let string..

🔎 ES6 이전의 데이터 타입 ES5까지 자바스크립트에서 가지고 있던 데이터타입은 Number, String, Boolean, undefined, null, object 정도였고 Symbol이란 데이터 타입은 존재하지 않았습니다. 🔎 ES6+의 데이터 타입 그러나 ES6+에서 Symbol과 BigInt라는 데이터 타입이 등장했습니다. 🔎 Symbol 심볼(Symbol) 데이터 타입은 원시 데이터 형의 일종으로 symbol() 함수는 심볼(symbol) 형식의 값을 반환하는데 반환되는 모든 심볼 값은 고유하다. 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용한다. ❓ 심볼 사용하기 const symbol = Symbol(); const hello..

🔎 커스텀 Hooks 우리는 중복된 코드를 보게 되면 재사용이 가능한 함수로 추출해서 중복 코드를 제거하고 싶어하죠? React에서도 여러 개의 hook을 조합해서 기능을 만들게 되는데 여러 컴포넌트에서 동일한 기능에 대해 동일한 hooks를 복사 붙여넣기 하다보면 중복된 코드들을 볼 수 있을 것입니다. 이 중복된 hooks에 대해서도 따로 커스텀 훅을 통해 간결하게 관리할 수 있게 됩니다. 예를 들어 상태 관리를 하는 기능을 우리가 useState 한줄로 불러와서 사용하는 것처럼 말이죠! 우리가 만든 기능에 대해서도 하나의 hook으로 관리해서 어느 컴포넌트에서라도 바로 불러와서 사용할 수 있다면 말이죠? React에서는 내가 원하는 인터페이스와 기능을 담은 나만의 커스텀 훅을 만들 수 있습니다. 커스..

🔎 함수 메모이제이션 useCallback은 함수를 메모이제이션(memoization)하기 위헤서 사용되는 hook 함수입니다. 첫 번째 인자로 넘어온 함수를, 두 번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해 놓고 재사용할 수 있게 해줍니다. const memoizationCallback = useCallback(함수, 배열); 예를 들어, 어떤 React 컴포넌트 함수 안에 함수가 선언이 되어 있다면 이 함수는 해당 컴포넌트가 렌더링될 때마다 새로운 함수가 생성됩니다. const add = () => x + y; 하지만 useCallback()을 사용하면, 해당 컴포넌트가 렌더링되더라도 그 함수가 의존하는 값들이 바뀌지 않는 한 기존 함수를 계속해서 반환합니다. 즉 x 또는 y 값이 바뀌면..

🔎 useMemo ? useMemo는 컴포넌트의 성능을 최적화시킬 수 있는 대표적인 react hooks 중 하나입니다. useMemo는 Memoization을 뜻합니다. ❓ Memoization Memoization(메모이제이션)은 기존에 수행한 연산의 결과값을 어딘가에 저장(캐싱)해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다. → 💡 연산의 결과값을 캐싱해 두고 재사용하기 위한 훅 함수! ❓ 언제 쓰는 걸까 함수형 컴포넌트는 렌더링 → Component 함수 호출 → 모든 내부 변수 초기화 순서를 거칩니다. Component가 렌더링이 될 때마다 value라는 변수가 초기화됩니다. 따라서 calcuate 함수는 반복적으로 호출됩니다. calcuate 함수가 cost가 높은 연산..

🔎 state ? React에서 state는 내부에서 변경될 수 있는 값을 의미합니다. 따라서 컴포넌트가 렌더링 되고 난 후 값이 변경되어 재렌더링될 가능성이 있는 값들은 state로 선언합ㄴ디ㅏ. state는 값은 state함수를 통해 갈아끼워진다 이 말이 무슨 뜻인지는 코드로 알아봅시다. function Test() { const [ name, setName ] = useState(''); const settingName = () => { // name = '홍길동'; => 이렇게 사용X setName('홍길동'); } return( {name} ) } 위 코드아 같이 state값인 name을 직접적으로 바꾸지 말라는 것인데, 무조건 setName(), state함수를 통해 값을 바꿔야 한다. sta..