본문 바로가기

react16

[React/TypeScript] React-Spilt-Table 오픈소스 라이브러리 Inner Circle 두 번째 프로젝트 '오픈소스 라이브러리 프로젝트' 활동에서 만든 라이브러리. https://www.npmjs.com/package/react-split-table react-split-tableA React component for creating split tables with resizable columns and rows.. Latest version: 0.0.20, last published: a day ago. Start using react-split-table in your project by running `npm i react-split-table`. There are no other projects in the npm regiwww.npmjs.com 아래의 순서로.. 2025. 4. 21.
[Inner Circle] FE과정 3-4주차 정리 25/04/07번들링, tsconfig에 대해서도 보기 25/04/08왜 useEffect 밖에서 실행한 함수는 ref(엘리먼트)값이 없을까?useEffect는 렌더링 직후 실행되기 때문.반면 일반 함수는 렌더링 중에 실행되기 때문에 엘리먼트가 렌더링되지 않은 시점이기 때문에 없다. 25/04/09에러 핸들링 시에 에러 바운더리를 이용해보고 싶다.(그냥)리렌더링시 state와 ref와 일반변수의 차이: 일반변수는 값이 안남아있음. state와 ref는 남아있음.state와 ref의 가장 큰 차이는 "값 변경" 시임. state는 값이 변경되면 리렌더링을 유발함.또 다른 차이는 ref는 항상 최신 값이라는 점. state는 렌더링이 끝나야 최신 값을 얻을 수 있음.고민되는것: 프리티어 쓰기멘토링: 요새는 .. 2025. 4. 16.
[React] 커스텀 훅으로 로직 분리 나는 왜 그렇게 커스텀 훅이 헷갈렸는지 모르겠는데, 최근 원티드 강의도 듣고 코드리뷰도 하고 챗지피티랑 놀다보니 슬슬 감이 잡히는 것 같다. 꼭 재사용되는 로직이 아니라도, 컴포넌트의 UI와 직접적으로 관련 있는 로직이 아닐 경우 뽑아내면 각자의 역할에 충실한 코드가 된다. VAC(View Asset Component) 패턴을 구현하기 위해서는 중요한 부분이다. 사실 내가 이걸 왜 쓰는지 감을 못 잡았어서 그렇지 구현은 정말 별것 없다.아래는 버튼을 누를 때마다 엘리먼트(box)를 1px씩 밑으로 내리는 로직을 useAction으로 뺀 것이다.export default function useAction(콜백) { const box = useRef(null); const count = useRe.. 2025. 2. 14.
[React] 불필요한 useEffect와 State 제거하기 오늘 회사에서 코드리뷰를 하는데 한분이 useEffect와 state를 제거할 수 있을 것 같다는 말씀을 해주셨다. 리액트 개발자들이라면 잘 알고 있듯이 useEffect와 state는 불필요한 렌더링을 발생시킬 수 있으므로 성능을 위해 꼭 필요한 경우에만 사용하도록 하는 것이 좋을 것이다. 아무튼 내가 짰던 코드를 대충 설명하면, props로 가져오는 객체 데이터가 있는데, useEffect 안에서 props가 변경될 때마다 그 데이터를 정제해서 두 개의 state로 나누고 그 state들을 뷰에 사용하는 형태였다.const [state1, setState1] = useState(null);const [state2, setState2] = useState(null);useEffect(() => { .. 2025. 2. 13.
[IT] FE 레거시 코드 리팩토링 강의 정리 원티드 프리온보딩 챌린지 "레거시 유지보수와 데이터 모으기" 강의 스트랭글러 패턴을 이용한다. 레거시, 새로운 코드 2개를 두고 새로운 코드를 점차 늘려가는 방식. 모든 테스트가 완료되면 그 때 비로소 레거시를 삭제한다. 새로운 코드를 우선 적용해놓고 에러가 발생하면 catch 등을 이용하여 레거시로 fallback하여 처리하도록 하는 식.위의 스트랭글러 패턴을 이용할 때는 Datadog, Centreon 등의 로그 모니터링 도구를 이용하여 1~2주 정도는 모니터링을 하여 새로운 코드가 오류를 뱉는지 확인한다.기능 단위(feature-based)로 작업 스콥을 자르는 게 좋다. 방법론에는 FSD 패턴이 있다. 하지만 프로젝트가 작다면 굳이 패턴을 적용하지 않는 것이 좋다.과거에는 사용자와의 상호작용이 많.. 2025. 1. 12.
[React] 비즈니스 로직과 UI 분리하기 보호되어 있는 글 입니다. 2025. 1. 12.
[React] React Profiler로 성능을 측정해보자 React의 컴포넌트는 아래와 같은 상황일 때 리렌더링됩니다.state의 값이 변했을 때context의 값이 변했을 때부모 컴포넌트가 리렌더링 되었을 때 자식 컴포넌트도 리렌더링됨props의 값이 변했을 때불필요하게 렌더링이 많아지거나, 혹은 렌더링에 오랜 시간이 걸린다면 최적화를 고려한다는 판단을 할 수 있지요. 크롬 확장 프로그램 React Profiler를 이용하면 렌더링을 추적할 수 있습니다. 개발자 도구 Profiler 탭에 들어가서 녹화 버튼을 클릭하고, 동작을 수행한 뒤 녹화를 정지하면 해당 동작으로 인해 발생한 렌더링을 분석해줍니다.  회색은 렌더링이 일어나지 않은 컴포넌트이며, 밝은 노란색 컴포넌트는 유독 렌더링하는 데 시간이 오래 걸린 컴포넌트를 나타냅니다. Ranked라는 하위 탭을 .. 2024. 11. 28.
[React] React.memo를 사용해보자 React.memo는 아래 포스트를 통해 개념에 대해 간단하게 다뤄본 적이 있습니다. [React] 리액트 최적화하기React 참조 개요 – ReactThe library for web and native user interfacesko.react.dev가장 큰 팁: 공식 문서를 잘 읽자. 1. useMemo공식 문서 설명재렌더링 사이에 계산 결과를 캐싱할 수 있게 해주는 React Hook 입니다.doringri.tistory.com이번 포스트에서는 React.memo에 대해 더 구체적으로 알아보겠습니다. 배경지식React 컴포넌트는 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 함께 리렌더링되는 특징을 가지고 있습니다.이때, 자식 컴포넌트를 memo로 감싸면 자식 컴포넌트에게 넘기는 props 값의 변.. 2024. 11. 27.
[React] Clean-up 함수에 대해 (feat. useRef) useEffect는 컴포넌트가 렌더링된 직후 실행되는 훅이다.그리고 보통 컴포넌트가 언마운트될 때 실행할 동작을 설정하기 위해 useEffect 안에서 Clean-up 함수를 호출한다.useEffect(() => { return () => console.log(state);}, []) Clean-up 함수는 리렌더링 직후 의존성 배열의 state 중 변경된 값이 있다면 클로저에 의해 이전 시점의 state를 기준으로 실행되는 함수이다. 의존성 배열에 state가 들어 있으면 두 가지 경우에 실행된다.컴포넌트가 언마운트될 때해당 state의 값이 변경될 때 Clean-up 함수에서 해당 state를 찍어 보면 state가 변경되기 직전의 값이 출력될 것이다. 아래 코드가 그 예시이다.export co.. 2024. 11. 22.
[React] useReducer 사용하기 state 로직을 reducer로 작성하기 – ReactThe library for web and native user interfacesko.react.dev 위 페이지의 내용을 공부하면서 정리한 글입니다. 언제 쓰나?여러 컴포넌트에서 같은 로직이 반복될 때(ex: 배열 필터링, 배열 요소 삭제 등) 실수를 줄이고 로직을 동시에 변경하기 쉬움로직을 직관적으로 나타내고 싶을 때예를 들어 setState(state => state.push(data)) 대신 dispatch({"add", data}); 로 좀더 직관적으로 나타낼 수 있음  어떻게 쓰나?Redux처럼 state와 action을 파라미터로 하여 Reducer 함수를 만듦.state에는 말 그대로 현재까지의 상태값이 저장되고, action을 통해.. 2024. 10. 29.
[React] 상태 관리 라이브러리 비교 1. Redux- 가장 보편적- 다소 많은 보일러플레이트 (store, reducer, action ...)- Action을 통해 상태 변화를 감지함- 보통 공식 라이브러리인 Redux-Toolkit과 함께 사용하여 코드가 조금 간소화됨- 캐시 기능은 RTK Query로 구현 가능- 비동기 처리를 위해 Redux-Thunk나 Redux-Saga 등의 미들웨어 사용 2. Recoil- 상태의 단위인 Atom을 사용, 유일한 키값으로 구분함- react hook을 통해 상태 변화를 감지함- Atom이 변경되면 해당 Atom을 구독하고 있는 컴포넌트들만 리렌더링됨- 상태 변화는 Selector를 통해 이루어짐- Selector는 자동 캐싱, 비동기 처리 3. Jotai- Recoil에서 영감을 받음- Atom.. 2024. 9. 29.
[React] 리액트 최적화하기 React 참조 개요 – ReactThe library for web and native user interfacesko.react.dev가장 큰 팁: 공식 문서를 잘 읽자.https://www.maeil-mail.kr/question/18 매일메일 - 기술 면접 질문 구독 서비스기술 면접 질문을 매일매일 메일로 보내드릴게요!www.maeil-mail.kr 1. useMemo공식 문서 설명재렌더링 사이에 계산 결과를 캐싱할 수 있게 해주는 React Hook 입니다.최적화를 위해서만 사용해야 합니다.일반적으로 React는 재렌더링 시에 모든 본문(함수 및 변수)을 다시 실행하지만, useMemo로 감싼 함수는 의존성 배열의 값이 변경되었을 때만 다시 연산하도록 합니다. useEffect는 useMemo와.. 2024. 9. 29.
[React] 불변성과 immer 라이브러리 (이번 포스팅 예시코드는 TypeScript로 작성함) React에서 상태를 업데이트할 때, 기존의 값을 유지하면서 상태값을 변경하는 것은 중요한데, 이를 불변성(Immutability)이라고 한다. const [nums, setNums] = useState([1, 2, 3]);useEffect(() => { console.log(nums);}, [nums]);const addNum = () => { nums.push(4);} 예를 들어, 위와 같이 리스트에 push를 했을 땐 값이 변경되었지만 useEffect에서 감지하지 못한다.  const addNum = () => { nums.push(4); setNums([...nums, 5]); // [1, 2, 3, 4, 5]} .. 2024. 9. 26.
[TDD/React] React Testing Library로 리액트 테스트 코드 작성하기 React Testing Library는 보통 리액트를 설치하면 기본적으로 같이 설치되어 있는 라이브러리입니다. TDD로 프로젝트를 하며 프론트엔드 테스트 코드를 작성한 경험이 있어서 정리합니다. 정적, 동적 컴포넌트 두 가지 모두 테스팅을 할 수 있는데, 여기서 정적 테스팅이란 말 그대로 웹 페이지에 정적인 html 요소가 표시되는지 확인하는 테스팅입니다. 먼저 정적인 요소 먼저 테스팅해보도록 하겠습니다. TDD가 늘 그렇듯 빈 Login 컴포넌트를 만들어 놓고 given-when-then 패턴으로 테스트 코드 먼저 작성합니다. 정적 테스트 코드 예시 // Login.test.tsx import { render, screen } from "@testing-library/react"; import Log.. 2024. 1. 30.
[React/TypeScript] setInterval 안에서 state가 변경되지 않을 때 (useInterval 사용법) // Timer.tsx const [currentSeconds, setCurrentSeconds] = useState(0); const [isReverse, setIsReverse] = useState(false); useEffect(() => { setInterval(() => { if (!isReverse) { setCurrentSeconds(prevState => prevState + 1); } else { setCurrentSeconds(prevState => prevState - 1); } }, 1 * 1000); }); 위처럼 isReverse가 false일 때는 1초마다 currentSeconds가 1씩 증가하고, true일 때는 1씩 감소하는 코드가 있습니다. isReverse가 false.. 2023. 12. 16.

티스토리툴바