본문으로 이동
React 이해하기
문서

React 이해하기

김효원 컬리 · 컬리 기술 블로그

원문 보기

AI 핵심 요약

DOM을 직접 조작하는 방식은 화면 요소와 이벤트가 많아질수록 복잡해지므로, React는 UI를 컴포넌트로 나누고 상태에 따라 무엇을 보여줄지 선언하는 방식을 제공한다. JSX로 작성한 UI는 React element가 되고, ReactDOM이 이를 실제 DOM에 반영하며, props로 컴포넌트에 데이터를 전달한다. 상태가 바뀌면 React는 렌더링과 재조정(reconciliation)을 통해 필요한 DOM 변경을 적용하고, PureComponent나 memo 같은 얕은 비교 최적화에는 불변 데이터 갱신이 중요하다. Hook은 함수 컴포넌트에서 상태와 재사용 로직을 다루게 해주지만, useState의 상태 병합 방식과 useEffect의 실행·정리 규칙을 이해해야 한다.

  • 컴포넌트는 UI와 관련 로직을 하나의 단위로 묶어 복잡한 화면을 나누는 방법이다.
  • JSX는 Babel을 거쳐 JavaScript로 변환되며, JSX 없이 React.createElement를 직접 사용할 수도 있다.
  • PureComponent와 React.memo의 얕은 비교를 활용할 때는 배열이나 객체를 직접 변경하지 말고 새 참조를 만들어야 한다.
  • useState는 클래스의 setState와 달리 기존 객체 상태를 자동으로 병합하지 않으므로 필요한 필드를 직접 보존해야 한다.
  • useEffect의 정리 함수로 이벤트 리스너를 제거해 컴포넌트가 사용한 자원을 정리할 수 있다.

소개

React의 기본 개념에 대해 알아봅시다

비슷한 학습 자료

책 이창현 예스24

HTML+CSS+JavaScript 기본부터 프로젝트 완성까지

책 이창현 예스24

지루한 코드 따라 치기는 이제 그만, 원리를 이해하고 화면으로 증명하는 모던 웹 개발 개발의 진짜 재미는 내가 작성한 코드의 논리를 이해하고, 그 결과물을 눈으로 확인할 때 느끼는 성취감에 있습니다. 특히 프론트엔드는 코드를 통해 화면이 세련되게 변화하는 결과물을 즉각적으로 확인할 수 있기에, 그 성취감이 더욱 클 수밖에 없습니다. 오늘날의 웹은 다양한 디바이스에 맞추어 유연하게 움직이는 반응형 레이아웃과, 페이지 새로 고침 없이 매끄럽게 동작하는 SPA(Single Page Application) 기반의 구조를 기본으로 합니다. 《모던 프론트엔드 입문자를 위한 HTML+CSS+JavaScript 기본부터 프로젝트 완성까지》는 바로 이 지점에서 출발했습니다. 가장 주안점을 둔 것은 기계적인 따라 치기를 넘어, 원리를 이해하고 결과 중심으로 주도적으로 학습하는 것입니다. 학습 과정에서 지루함을 느끼지 않도록 복잡한 이론 설명은 최소화하고, 대신 코드를 작성하면 UI(사용자 인터페이스)...

웹 개발 웹 퍼블리싱 로드맵 2개에 담김

문서 박건영

자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기

문서 박건영

왜 토스증권 PC의 그리드 레이아웃을 왜 직접 구현하게 되었는지, 그리고 어떻게 만들어져 있는지를 이제부터 소개해 드릴게요.

프론트엔드 알고리즘 · 자료구조

문서 임지훈

여러 프레임워크에서 사용할 수 있는 라이브러리 만들기

문서 임지훈

여러분은 라이브러리를 만들어봤거나, 만들어야겠다고 생각해본 적이 있나요? 이번에는 프론트엔드 개발 환경에서 높은 범용성을 나타내는 용어 중 하나인 “Framework Agnostic”에 대해 이야기 해보려고 합니다.

웹 개발 프론트엔드

문서 권가은

디자인 컴포넌트 라이브러리를 ‘실제 사용 방식’에 맞게 다시 설계한 이야기

문서 권가은

디자인 컴포넌트 라이브러리 빌드 및 구조 개선기

프론트엔드 UI/UX

책 김기수 예스24

코딩 자율학습 리액트 프런트엔드 개발 입문

책 김기수 예스24

React 19와 TypeScript, 기초부터 실무까지 한 권에! 최신 리액트 기능과 실무 패턴을 가장 빠르고 확실하게 익히는 입문서 최신 리액트 19와 타입스크립트를 기반으로, 기초 개념부터 실무 패턴까지 한 번에 익힐 수 있도록 구성한 리액트 입문서이다. JSX, 컴포넌트 구조, props와 state, 이벤트 처리 등 기본기를 탄탄히 다지고, 상태 관리, 스타일링, 라우팅, 폼 처리, 비동기 데이터 통신 등 실무 필수 기술을 체계적으로 학습할 수 있다. 변화가 빠른 프런트엔드 생태계에서도 자신 있게 적응할 수 있는 실력을 길러준다. 각 장은 핵심 개념 설명과 실습 예제를 결합해 입문자도 무리 없이 따라갈 수 있도록 구성되었다. 전통적인 CSS부터 Tailwind CSS까지 다양한 스타일링 방법을 비교하며, React.memo, useCallback, useTransition 같은 성능 최적화 기법과 리액트 19의 새로운 기능을 예제를 통해 자연스럽게 익힌다.

프론트엔드

책 김운아 예스24

Do it! 반응형 웹 페이지 만들기

책 김운아 예스24

개발자는 물론 기획자, 디자이너도 알아야 하는 반응형 웹의 필수 기술! 실제 웹 페이지를 반응형 웹으로 변환하는 과정 대공개! 서비스 기획, 웹 디자인, 개발까지 1인 3역을 해내는 저자가 가장 효율적으로 반응형 웹사이트를 제작할 수 있는 방법과 노하우를 알려 준다. 헷갈리기 쉬운 반응형 웹의 기본 개념부터 플렉서블 박스, 가변 그리드, 미디어 쿼리, 뷰포트와 같은 핵심 기술까지 예제로 실습하는 전 과정을 담았다. 또한 실제 웹사이트의 구조를 잡고 콘텐츠를 배치하는 레이아웃 디자인과 HTML5, CSS3로 제작하는 과정도 자세히 들어 있다. 이 과정을 모두 완료하면 평범했던 기존 웹사이트도 다양한 화면 크기에 대응하는 반응형 웹사이트로 전환하고, 웹사이트의 유지 보수와 비용 감소, 검색 엔진 최적화까지 가능하다. (※ 2017년에 출간된 『Do it! 반응형 웹 만들기』의 전면 개정판으로 최신 자료와 독자 의견을 반영하여 만들었습니다.

웹 개발 웹 퍼블리싱