본문 바로가기

전체 글

 (71)
[React] useImperativeHandle 사용해보기 React를 사용하면서 useRef는 input에 포커스를 줄때나 썼었고useImperativeHandle은 이름도 들어보지 못했다. 부모 컴포넌트에서 자식의 특정 함수를 실행할 수 있다는걸 이번에 제대로 알게 되었다. 우선 이걸 정리하려면 ref부터 다시 알아야 할 것 같다. 기본 개념 정리useRefuseRef()는 렌더링과 관계없이 값을 저장할고 싶을 때 쓰는 훅이다DOM에 직접 접근하거나 렌더링 없이 값을 유지할 때 사용된다.const inputRef = useRef(null);useEffect(() => { inputRef.current?.focus(); // DOM 직접 조작}, []);forwardRefReact에서는 기본적으로 부모에서 자식으로 ref 전달이 되지않는다.이걸 가능하게 해..
[React] useReducer 사용해보기 리액트에서 상태를 관리할 때 useState를 가장 많이 사용하지만,복잡한 상태 변경 로직을 다루다보면 코드가 지저분해지고 유지보수가 어려워질 수 있다. 그런 문제를 해결할 수 있는 useReducer 훅에 대해 실습하며 정리해보았다. useReducer란?useReducer는 상태(state)와 상태변경 로직(reducer)을 분리해서 관리할 수 있는 훅이다.함수형 프로그래밍에서 자주 쓰이는 Reducer 패턴을 리액트에서 적용한 형태다.const [state, dispatch] = useReducer(reducer, initialState);- state: 현재 상태 값- dispatch: 상태를 변경하기 위해 사용하는 함수 (action을 보냄)- reducer: 상태를 업데이트 하는 함수. red..
[React] useCallback을 사용해 불필요한 렌더링 막기 리액트 훅 중 하나인 useCallback이 어떻게 불필요한 렌더링을 줄이고실제로 앱의 성능을 향상시키는지 실습하며 정리해보았다 useCallback란?useCallback은 특정 함수를 메모이제이션하여 의존성 값이 바뀌지 않는 한 같은 함수 참조값을 유지해주는 Hook이다const memoizedFn = useCallback(() => { // 로직}, [dependencies]);- 함수가 재사용되는 구조에서 의존성 값이 바뀌지 않으면 함수도 재생성되지 않는다.- 자식 컴포넌트에 함수를 props로 넘길때, React.memo와 함께 쓰면 불필요한 렌더링을 막을 수 있다. 왜 쓸까?React는 state나 props가 변경되면 컴포넌트를 리렌더링하여 UI를 업데이트 한다.이때 함수형 컴포넌트의 경우..
[React] useMemo 사용해보기 컴포넌트 내부에 계산 비용이 큰 함수가 있으면, 리렌더링될 때마다 매번 실행돼서 화면이 버벅일 수 있다.그런 상황을 방지하기 위한 Hook인 useMemo를 실습하며 정리해보았다. useMemo란?useMemo는 계산 비용이 큰 작업의 결과를 기억(Memoization) 해서불필요하게 다시 계산되지 않도록 막아주는 Hook이다const memoizedValue = useMemo(() => expensiveFunction(input), [input]);- input이 바뀌었을 때만 expensiveFunction()이 실행됨- 의존성 배열의 값이 바뀌지 않으면 이전 결과를 그대로 반환함 왜 쓸까?React 컴포넌트는 상태가 바뀌면 전체가 다시 렌더링되는데단순히 렌더링만 해도 느린 계산 함수가 다시 실행된다..
[React] useRef 사용해보기 useRef란?useRef는 변경 가능한 ref객체를 생성하며, 이 객체는 .current라는 property를 가진다.이 값을 DOM 요소에 연결하거나, 렌더링 사이에 유지해야하는 값을 저장하는데 사용할 수 있다. const ref = useRef(초기값);ref.current = 저장할 값;- 값이 바뀌어도 컴포넌트는 다시 렌더링되지 않는다.- DOM 요소에 직접 접근할 때도 사용된다. 실습해보기input에 포커스 주기버튼을 눌렀을 때 input에 포커스가 가도록 만들어봤다.useRef로 해당 DOM 요소에 직접 접근할 수 있다.import { useRef } from "react";const FocusInput = () => { const inputRef = useRef(null); const ha..
[React] useContext 사용해보기 useContext란?useContext는 컴포넌트가 가장 가까운 MyContext.Provider에서 제공하는 context 값을 읽게해주는 Hook이다.값을 읽기만 하며, context 값을 설정하려면 Provider를 사용해야 한다.const value = useContext(MyContext);MyContext는 createContext()로 만든 객체이다.useContext()는 현재 컴포넌트가 어떤 Provider 안에 위치해 있을 때만 동작한다.하위 컴포넌트 어디에서든 값을 꺼내 쓸 수 있다는 점이 핵심이다. 왜 사용할까..?React에서 props로 상태를 전달할 때 종종 이런 구조가 생긴다. 이 구조에서 까지 상태를 전달하려면App 에서 ThemeToggl..
[React] useEffect 사용해보기 [React] useState 사용해보기멘토님께서 React에서 제공하는 useHook 중 몇 개를 써보았는지 물어보시며한번씩 다 써보는걸 추천하셨다. 그래서 하나씩 직접 써보고 정리해보기로 했다.🙂 React에서 가장 자주 사용되는 Hook인 usmin-i0212.tistory.com이전 편에 이어 이번엔 useEffect를 사용해보자 React에서 컴포넌트의 렌더링 외 작업이 필요한 순간이 있다. 예를 들자면- API 요청- 이벤트 리스너 등록- 타이머 설정- 외부 상태 동기화등등.. 이런 작업들을 사이드 이펙트라고 하며, 이를 처리하기 위해 useEffect라는 Hook을 제공한다. useEffect란?컴포넌트가 마운트(렌더링)된 이후 실행되는 코드 블록을 정의할 수 있게 해주는 Hook이다.us..
구름톤 풀스택 트레이닝 12회차를 마치며 지난 금요일, 7개월 동안의 대장정이 마무리되었다.기억에 남기고 싶어 이렇게 주절주절 정리해본다. 프로젝트 기획 발표우리 팀은 FE 2명, BE 4명으로 구성되었다.초기 아이디에이션을 통해 무려 100가지 아이디어를 도출했고,회의를 거쳐 사용자 공감도 / 기술 구현 가능성 / 카카오 API 활용 적합성을 기준으로 선별했다. 최종적으로 선택된 아이템은 자취생을 위한 커뮤니티 플랫폼.기능 확장성과 팀원들의 관심도가 높았던 것이 결정적인 이유였다. 발표 당일솔직히 발표 당일에는 걱정도 많았다.심사위원분들로부터 “일정에 비해 기능이 너무 많다”는 피드백을 들었는데,사실 우리 입장에선 거르고 또 걸러서 남긴 기능들이었기 때문에 좀 아쉽기도 했다 ㅎㅎ.. 그리고 기획 발표 결과는 아쉽게도 1등은 하지 못했다.1등 ..

티스토리툴바