본문 바로가기

IT/React

 (7)
Hook 규칙 Hook 규칙 Hook 은 JavaScript 함수이다. 하지만 Hook을 사용할 때는 두 가지 규칙이 있다. React의 함수 내에서만 사용되어야 한다. 즉 일반적인 JavaScript 내에서는 호출하면 안된다. React 함수의 최상단에서 호출해야 한다. useState 혹은 useEffect 의 경우 React가 순서를 지정해 놓기 때문에 rendering이 발생하는 경우 React가 지정한 순서에 따라서 hook을 호출할 수 있다. 하지만 if, for 안에서 hook을 사용할 경우 순서가 엇갈림에 따라 버그를 초래할 가능성이 있기 때문에 항상 React 함수의 최상단에서 hook을 호출하도록 규칙을 정해 놓은 것이다. 이러한 규칙은 linter plugin 참고. React 함수 내에서 Hook..
Code splitting Code splitting CRA로 만든 React App은 Webpack이 함께 설치된다. 따라서 번들링 시 Webpack에 의해 자동으로 번들링이 된다. App의 크기가 증가되면 자연스레 번들의 크기도 커지게 된다. 즉 App이 Load 되는 시간 역시 비례하여 증가하게 된다. 이러한 단점들을 보완하기 위해 코드 분할 을 활용하여 App의 성능을 개선하고 사용자에게 좋은 UX를 경험하게 한다. import 가장 단순한 방법으로 Dynamic import() 을 활용한다. // 기존의 import와 살짝 다른 모습 const AppTest = React.lazy(() => import("./AppTest")); Webpack이 위의 구문을 만난다면 Webpack이 자동으로 App의 코드를 분할한다. 즉..
useCallback useCallback useCallback 은 특정 함수를 새로 만들지 않고 재사용 할 때 사용하는 hook 이다. 즉 함수 를 메모이제이션 하기 위해 사용하는 hook 이다. 컴포넌트가 re-render될 때 불필요하게 함수가 다시 생성되는 것을 방지한다. 따라서 이러한 React로 만든 앱을 최적화 하기 위해 불필요한 렌더링을 방지하여 앱의 퍼포먼스와 효율성을 높일 수 있다. useCallback(cb, deps) 사용 이유 React 에서는 컴포넌트가 다시 렌더링 될 때, 컴포넌트 안에 선언된 함수를 새로 생성한다. 즉 지속적으로 렌더링을 하며 함수도 계속 생성한다는 의미이다. const App = () => { const [name, setName] = useState("FoxMon") const..
Key JavaScript 에서의 List Array.prototype.map() map() 메소드는 배열 내의 모든 요소 각각에 대해 callback 함수를 호출한 결과를 모아 새로운 배열 을 반환한다. const arr = [1, 2, 3, 4] const arr2 = arr.map((a) => a * 2) console.log(arr2) // Array [2, 4, 6, 8] 위의 코드는 콘솔에 값 2, 4, 6, 8 을 담고 있는 새로운 Array 를 출력한다. React 에서 배열을 Element 리스트로 만드는 방식은 위의 방식과 유사하다. React에서의 map() 활용 아래와 같이 사용하여 listItems를 element 안에 포함할 수 있다. ... const arr = [1, 2, 3, 4]..
Custom Hook Custom Hook 자신만의 Hook을 만들어 컴포넌트 로직을 함수로 추출하여 재사용 가능성을 증가시킬 수 있다. 이처럼 React에서는 로직의 재사용성을 높이기 위해 Custom Hook을 만들어 사용한다. 단 아래와 같은 몇 가지 규칙이 존재한다. 사용자 정의 Hook의 이름은 use 로 시작한다 1. 특정 함수가 그 안에서 Hook을 호출하는지 알 수 없기 때문에 이름 규칙이 존재한다. 2. 이러한 규칙을 지키지 않으면 Hook 규칙을 준수하고 있는지 확인할 수 없다. 같은 Hook을 사용하는 두 개의 Component는 state를 공유하지 않는다. import { useState, useCallback } from "react" const useInputs = (initialValue) => ..
useEffect Hooks Hook은 Component에서 데이터(state) 를 관리하고 데이터가 변경될 때 Effect(상호작용) 를 다룰 수 있다. useState useEffect useCallback 이러한 것들이 모두 React의 hooks 이다. 기존의 Class 기반 Component는 State와 life-cycle을 관리하기 복잡했지만 Hooks는 이러한 것들을 간편하게 관리할 수 있게 도와준다. 단, Hooks는 React 함수 내부 에서만 사용이 가능하며 Hooks의 이름은 use로 시작한다. React Hook은 이러한 특징들이 있는데, 그 중에서 나를 골치아프게 했던 useEffect에 대한 기록을 남기려고 한다. Effect Hook Effect Hook을 사용하면 함수 컴포넌트에서 Side ..
State State React를 활용하여 프로젝트를 진행하다 보면 State의 개념이나 사용 방법이 익숙하지 않아 이로 인해 스트레스를 많이 받았던 경험이 있으리라 예상한다. 이처럼 반복되는 스트레스를 줄이고자 State에 관한 글을 적어 보려고 한다. State란 요약하자면 컴포넌트 내에서 관리하는 변수 이다. 이러한 state를 사용하기 위해선 아래처럼 useState를 활용하여 선언 및 초기화 해야 한다. ( React hook 기준 ) const [number, setNumber] = useState(0) React 에서는 number의 값을 변경하고 싶은 경우 setNumber를 활용하여 변경해야 한다. const onClickButtonEventHandler = () => { // add number ..

티스토리툴바