React
8개의 글
함수 참조 제대로 알자.
2025. 6. 17. · 8 min read
React에서 useCallback은 성능 최적화를 위해 자주 사용된다. 하지만 useCallback의 사용 자체에만 집중하다 보면, 정작 단순한 함수 참조 유지라는 기본 개념을 잊고 작업하게 된다. 그리고 시간이 지난 뒤, 왜 이 함수는 계속 새로 생성되는 거지? 라는 의문을 갖게 된다. 이번 글에서는 회사에서 useCallback을 사용하던 중, 함수 ...
React Fiber 완전 정복
2025. 5. 20. · 20 min read
React를 최근에 접한 개발자라면 대부분 한 번쯤은 "Fiber"라는 용어를 들어봤을 것이다. 실제로 면접에서 자주 등장하는 주제이기 때문에, 작업 단위를 나누어 처리한다는 식의 표면적인 설명은 익숙할 수 있다. 하지만 Fiber가 왜 도입되었는지, 이전에는 React가 어떤 방식으로 동작했는지, 그리고 Fiber가 어떻게 설계되어 있는지는 잘 모르는 경...
Concurrent Mode
2024. 8. 24. · 9 min read
zustand의 공식문서를 살펴보다, "Zustand는 React의 useSyncExternalStore 훅을 사용하여 React의 상태 관리 시스템과 원활하게 통합되어 Concurrent Mode와 호환된다" 는 내용을 보았다. Concurrent Mode라는 낯선 단어를 찾아보게 되었고, 생각보다 면접 질문으로도 쏠쏠하게 등장하기에 정리해보려한다! Re...
Zustand, 너 뭔데 ProviderLess 인 거야?
2024. 8. 18. · 10 min read
나는 Zustand가 Provider이 필요하지 않는 상태관리 라이브러리라는 것을 알고 있었다. 하지만 갑자기 생각이 들었다. 왜?? 어떻게 동작하기에 상태관리 라이브러리가 필요하지 않을까? 궁금해서 찾아보다가, 좋은 내용이 많이 보여 공유해보려 한다. React 상태관리 일반적인 React 애플리케이션에서 상태는 아래 그림처럼 동작한다. 컴포넌트 내부 상...
useEffect의 Dependency로 useRef를 사용해보자!
2024. 4. 19. · 4 min read
갑자기 작업하다가 궁금해져서 적는 첫번째 오이소박한 궁금증!! useEffect의 dependency에 useRef를 넣으면? useEffect 의 []에 의존성(dependency)를 넣을 수 있다! 이건 다 알고 있겠죠!? 그러면 리렌더링이 될 때 어느 시점에 의존성이 작동 될 까!? 긴말 말고 예시코드를 보자! 위 코드는 useRef의 current,...
Good bye CRA, Hello Vite For Migration
2024. 3. 4. · 32 min read
CRA(Create React App) 2016년 이전에는 Create React App(CRA)가 등장하기 전에 프론트엔드 개발 환경이 통합되어 있지 않아서, 기존 앱에 리액트를 추가하기 위해 npm에서 import한 후 기존 빌드 구성을 수정하는 번거로움이 있었다고 한다! 여러 도구를 설치하고 JSX를 사용하기 위한 사전 설정을 진행하며, 개발과 프로덕...
React 19의 새로운 Hooks 완벽 가이드를 읽고 변경될 React를 맞이해보자
2024. 2. 16. · 23 min read
React 19에 도입될 Hooks use(Promise) & use(Context) Form actions useFormState useFormStatus useOptimistic Bonus: Async transitions 마무리 잠깐!!! 모든 코드는 테스트 환경 에서 테스트 가능합니다. (단, React 19에 포함될 예정이...
React useState 완벽 가이드 모든 것을 한눈에 이해해보자
2023. 8. 20. · 9 min read
함수형 컴포넌트의 상태 관리 pjqnl16lm7 - CodeSandbox 클래스형 컴포넌트는 render() 메서드를 통해 상태 변경을 감지 Props 는 react 에서 불변 / this 는 변경가능, 조작가능 함수형 컴포넌트는 렌더링이 발생하면 함수 자체가 다시 호출 render 될 때의 값을 유지 ⇒ 상태를 관리하려면 함수가 다시 호출되었을 때 이전 ...
함수 참조 제대로 알자.
2025. 6. 17. · 8 min read
React에서 useCallback은 성능 최적화를 위해 자주 사용된다. 하지만 useCallback의 사용 자체에만 집중하다 보면, 정작 단순한 함수 참조 유지라는 기본 개념을 잊고 작업하게 된다. 그리고 시간이 지난 뒤, 왜 이 함수는 계속 새로 생성되는 거지? 라는 의문을 갖게 된다. 이번 글에서는 회사에서 useCallback을 사용하던 중, 함수 ...
React Fiber 완전 정복
2025. 5. 20. · 20 min read
React를 최근에 접한 개발자라면 대부분 한 번쯤은 "Fiber"라는 용어를 들어봤을 것이다. 실제로 면접에서 자주 등장하는 주제이기 때문에, 작업 단위를 나누어 처리한다는 식의 표면적인 설명은 익숙할 수 있다. 하지만 Fiber가 왜 도입되었는지, 이전에는 React가 어떤 방식으로 동작했는지, 그리고 Fiber가 어떻게 설계되어 있는지는 잘 모르는 경...
Concurrent Mode
2024. 8. 24. · 9 min read
zustand의 공식문서를 살펴보다, "Zustand는 React의 useSyncExternalStore 훅을 사용하여 React의 상태 관리 시스템과 원활하게 통합되어 Concurrent Mode와 호환된다" 는 내용을 보았다. Concurrent Mode라는 낯선 단어를 찾아보게 되었고, 생각보다 면접 질문으로도 쏠쏠하게 등장하기에 정리해보려한다! Re...
Zustand, 너 뭔데 ProviderLess 인 거야?
2024. 8. 18. · 10 min read
나는 Zustand가 Provider이 필요하지 않는 상태관리 라이브러리라는 것을 알고 있었다. 하지만 갑자기 생각이 들었다. 왜?? 어떻게 동작하기에 상태관리 라이브러리가 필요하지 않을까? 궁금해서 찾아보다가, 좋은 내용이 많이 보여 공유해보려 한다. React 상태관리 일반적인 React 애플리케이션에서 상태는 아래 그림처럼 동작한다. 컴포넌트 내부 상...
useEffect의 Dependency로 useRef를 사용해보자!
2024. 4. 19. · 4 min read
갑자기 작업하다가 궁금해져서 적는 첫번째 오이소박한 궁금증!! useEffect의 dependency에 useRef를 넣으면? useEffect 의 []에 의존성(dependency)를 넣을 수 있다! 이건 다 알고 있겠죠!? 그러면 리렌더링이 될 때 어느 시점에 의존성이 작동 될 까!? 긴말 말고 예시코드를 보자! 위 코드는 useRef의 current,...
Good bye CRA, Hello Vite For Migration
2024. 3. 4. · 32 min read
CRA(Create React App) 2016년 이전에는 Create React App(CRA)가 등장하기 전에 프론트엔드 개발 환경이 통합되어 있지 않아서, 기존 앱에 리액트를 추가하기 위해 npm에서 import한 후 기존 빌드 구성을 수정하는 번거로움이 있었다고 한다! 여러 도구를 설치하고 JSX를 사용하기 위한 사전 설정을 진행하며, 개발과 프로덕...
React 19의 새로운 Hooks 완벽 가이드를 읽고 변경될 React를 맞이해보자
2024. 2. 16. · 23 min read
React 19에 도입될 Hooks use(Promise) & use(Context) Form actions useFormState useFormStatus useOptimistic Bonus: Async transitions 마무리 잠깐!!! 모든 코드는 테스트 환경 에서 테스트 가능합니다. (단, React 19에 포함될 예정이...
React useState 완벽 가이드 모든 것을 한눈에 이해해보자
2023. 8. 20. · 9 min read
함수형 컴포넌트의 상태 관리 pjqnl16lm7 - CodeSandbox 클래스형 컴포넌트는 render() 메서드를 통해 상태 변경을 감지 Props 는 react 에서 불변 / this 는 변경가능, 조작가능 함수형 컴포넌트는 렌더링이 발생하면 함수 자체가 다시 호출 render 될 때의 값을 유지 ⇒ 상태를 관리하려면 함수가 다시 호출되었을 때 이전 ...