React12 TypeScript 가이드 TypeScript는 정적인 언어로 컴파일 시에 JavaScript파일을 생성한다. 또한, JavaScript의 슈퍼셋으로 JavaScript가 가지고 있는 모든 기능을 포함하고 있다. 왜 써야하는가? JS는 동적이다. const, var, let같은 변수 선언 키워드만 보더라도 타입이 없다. 이러한 동적 타입은 팀원과의 협업 뿐만 아니라 심지어 혼자 개발할 때에도 개발에 혼동을 주기가 쉽다. 또한 런타임 에러가 발생하는 요인이기도 하다. 한 예로, 아래와 같은 코드가 있을 때 addTwo라는 함수는 리턴 값으로 string을 반환한다. 하지만 개발자가 함수의 return 값을 숫자 타입으로 생각하고 다음과 같이 log를 출력하면 원하지 않은 결과가 출력된다. function addTwo(one, two.. 2020. 10. 14. React에서 불변성을 지켜야 하는 이유 불변성이라는 단어는 React를 관통하는 핵심 키워드라고 볼 수 있습니다. 불변성은 어떤 값을 직접적으로 변경하지 않고 새로운 값을 만들어내는 것입니다. 필요한 값을 변형해서 사용하고 싶다면 어떤 값의 사본을 만들어서 사용해야 합니다. JS에서 원시 타입은 괜찮지만 객체 타입의 불변성을 지키는 것은 고려해야 할 부분이 있습니다. 아래와 같은 코드가 있다고 했을 때 user와 copyUser 변수는 같은 참조(Memory Address) 값을 가집니다. (객체 타입은 참조 값을 주고받습니다.) 그렇기 때문에 user가 가지고 있는 객체의 값이 변경되면 copyUser도 같은 객체를 가지기 때문에 값이 공유됩니다. 하지만 이런 작동 방식은 값을 예측할 수 없게 하거나 버그를 유발하기 때문에 불변성을 통해서 .. 2020. 9. 23. React - useState vs useReducer and Custom Hook 함수형 컴포넌트에서 상태를 관리하기 위해 보통 useState를 사용하게 됩니다. useState를 사용하여 만든 Counter Component입니다. 하지만 여기서 관련 state가 추가되고 함수가 많아진다면 관리하기 까다로워질 것입니다. import React, { useState, useCallback } from "react"; export default function Counter() { const [num, setNum] = useState(0); const onIncrease = useCallback(() => { setNum((prevNum) => prevNum + 1); }, []); const onDecrease = useCallback(() => { setNum((prevNum) .. 2020. 9. 10. React Component 최적화 - useMemo, useCallback, React.memo 함수형 컴포넌트(functional component)의 경우 Hooks를 통해서 다양한 작업을 할 수 있게 됩니다. 이 포스트에서 알아볼 Hook은 useMemo, useCallback입니다. 그리고 마지막으로 React.memo도 알아봅니다. 먼저, 컴포넌트가 리렌더링 되는 조건을 알아보면 다음과 같습니다. - 부모 컴포넌트의 리렌더링 - Props의 변화 - State의 변화 - this.forceUpdate로 강제로 렌더링 다음과 같은 컴포넌트 코드가 있습니다. 아래 코드는 다음과 같이 진행됩니다. 1. input의 입력 2. state의 변경으로 인한 컴포넌트 리렌더링 3. onChange 함수의 선언 및 할당 즉 input이 입력될 때마다 리렌더링이 진행되고 그때마다 onChange의 함수를 .. 2020. 9. 10. 이전 1 2 3 다음
