728x90 반응형 분류 전체보기145 [react] useCallback Hook + 예제 useCallback의 탄생 배경 useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용합니다. 함수를 선언하는 것 자체는 메모리도, CPU도 리소스를 많이 차지하는 작업은 아니지만, 한 번 만든 함수를 필요할 때만 새로 만들고 재사용하는 것은 매우 중요합니다. 그 이유는, Virtual DOM에서 불필요한 렌더링을 줄일 수 있기 때문입니다. 예를 들어, 부모 컴포넌트가 자식 컴포넌트에게 함수를 props로 전달할 때, 자식 컴포넌트가 props가 변경될 때마다 새로운 함수를 생성하면 부모 컴포넌트가 리렌더링 됩니다. 이를 해결하기 위해 useCallback을 사용하여 자식 컴포넌트에서 메모이제이션된 함수를 사용할 수 있습니다. useCallback Hook useMemo를 기반으.. 2023. 4. 27. [react] useEffect Hook + 예제 useEffect의 탄생 배경 useEffect는 컴포넌트가 렌더링 될 때 특정 작업을 수행하도록 설정할 수 있습니다. 기존 클래스 컴포넌트에서는 componentDidMount, componentDidUpdate, componentWillUnmount 등의 메서드를 사용하여 컴포넌트 생명주기에 따른 작업을 처리했었습니다. 그러나 useEffect는 함수형 컴포넌트에서도 동일한 작업을 처리할 수 있게 해주는 것이 특징입니다. useEffect를 사용하면 아래와 같은 작업을 할 수 있습니다. API 호출 DOM 조작 이벤트 리스너 등록 및 해제 타이머 설정 및 해제 외부 라이브러리 로딩 useEffect Hook useEffect의 첫 번째 파라미터에는 함수, 두 번째 파라미터에는 의존성이 있는 배열을 넣.. 2023. 4. 26. [react] useReducer Hook + 예제 useReducer의 탄생 배경 상태를 관리할 때 useState를 주로 사용하는데, 이 방법말고도 useReducer를 사용할 수 있습니다. useReducer를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다는 장점이 있습니다. 상태 업데이트 로직을 컴포넌트 바깥에 작성할 수도 있고, 심지어 다른 파일에 작성 후 불러와서 사용할 수도 있습니다. useReducer Hook useReducer의 사용법은 아래와 같습니다. const [state, dispatch] = useReducer(reducer, initialState); 여기서 state는 앞으로 컴포넌트에서 사용할 state이고, dispatch는 액션을 발생시키는 함수입니다. useReducer의 첫 번째 파라미터는 .. 2023. 4. 26. [react] useContext Hook + 예제 useContext의 탄생 배경 react에서 상위 컴포넌트에서 하위 컴포넌트를 데이터를 전달해야하는 케이스는 자주 발생합니다. 일반적으로 props를 이용하여 데이터를 전달할 수 있지만, 상위 컴포넌트와 하위 컴포넌트 사이에 여러개의 중간 컴포넌트가 있는 경우에는 이 과정이 매우 번거롭습니다. 이 때 사용하는 것이 useContext입니다. 물론 redux를 사용할 수도 있습니다. 즉, 데이터를 전역적으로 관리하고 전달하는 경우 편리하게 하기 위해 useContext를 사용합니다. useContext Hook useContext는 리엑트의 Context API를 사용하여 구현합니다. 1. createContext 함수를 사용하여 새로운 Context 객체를 생성하고, 2. 이후 useContext Ho.. 2023. 4. 26. [react] useRef Hook + 예제 useRef의 탄생 배경 JS를 사용하면서 특정 DOM을 선택해야 하는 상황에서 getElementById, querySelector와 같은 DOM 선택자 함수를 사용한다. react를 사용하는 프로젝트에서도 DOM을 직접 선택해야 하는 상황이 발생할 수 있다. 예를 들어, 특정 엘리먼트의 크기를 가져와야 한다던가, 스크롤바 위치를 가져오거나 설정해야 한다던가 등의 상황 등이 있다. 추가적으로 HTML 5 Video 관련 라이브러리(Video.js), 그래프 관련 라이브러리(chart.js) 등 외부 라이브러리를 사용할 때에도 특정 DOM에다 적용하기 때문에 DOM을 선택해야 하는 상황이 발생할 수 있다. 이때, 리엑트에서 ref라는 것을 사용한다. useRef Hook 함수형 컴포넌트에서 ref를 사용.. 2023. 4. 26. 이전 1 ··· 9 10 11 12 13 14 15 ··· 29 다음 728x90 반응형
