React 기본

React ? React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리로, Facebook에서 개발하였다. 이 라이브러리는 단일 페이지 애플리케이션(SPA)이나 웹 애플리케이션의 일부분을 개발할 때 사용되며, 사용자 인터페이스를 구성하는 데 있어서

용어 정리 react를 본격적으로 들어가기 전에, react에서 자주 사용하는 전용 용어들이 있다. 또한 기존 용어들도 복습할 겸 정리를 하고 들어가자. 컴포넌트(Component) react의 기본 구성 요소로, 재사용 가능한 UI의 가장 작은 단위이다. comp

훅 (Hook) 함수형 component에서 상태(state)와 라이프사이클 로직을 관리하기 위한 기능을 제공하는 react의 API이다. Hook이라는 영단어는 갈고리라는 뜻을 갖고 있는데, 일반적인 프로그래밍에서는 원래 존재하는 어떤 기능에 마치 갈고리를 거는 것처

react와 같이 렌더링을 전체적으로 담당하는 프론트엔드 라이브러리는 개발 환경이 중요하다. Node.js와 npm 설치 react 개발을 시작하기 위해 Node.js를 설치해야 한다. Node.js는 js 실행 환경을 제공하며, npm을 함께 자동으로 설치해준다.

CRA create-react-app은 react의 보일러 플레이트이다. 보일러 플레이트란 특정 개발작업을 하기 위해 미리 준비된 환경 및 도구 세팅을 의미한다. 이전의 html 내부에서의 수동 설치 이외에도 추가적으로 해줘야하는 작업이 있다. 바로 Webpack 설치

React는 root element 내에서 모든 component를 구성하고, 조합하며 유저에게 화면을 렌더링해준다. 또한 Virtual DOM을 사용하여 UI 업데이트를 효율적으로 처리하는데, 이 과정에서 특정한 알고리즘이 중요한 역할을 한다. 이러한 작동 방법은 어

본격적으로 react에 들어갈 component를 작성해보자. component는 어떻게 만드는 걸까?component를 작성하게 도와주는 문법이다. 문자도, html도 아닌 js의 확장 문법이다. 때문에 js의 기본 기능이 포함되어 있다. 아래와 같이, 태그의 값을

생명주기란 react에서 컴포넌트가 생성이 되고, 업데이트가 되며, 소멸될 때 까지의 과정을 말한다. 이러한 생명주기 단계에서는 컴포넌트가 특정한 시점에 어떤 작업을 수행하는지를 제어하고 조절할 수 있다.모든 컴포넌트는 여러 종류의 "생명주기 메서드" 를 가지며, 이

react의 이벤트는 js의 이벤트와 유사하지만 몇가지 다른 부분이 있다.합성 이벤트 객체 사용Synthetic Envent (합성 이벤트) 라고 하며, 이벤트 헨들러는 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 이벤트 래퍼인 syntheticEvent 객체를

react에서 리스트와 폼은 웹 애플리케이션의 사용자 인터페이스를 구성하는 데 중요한 역할을 하는 요소이다.주로 같은 종류의 요소들을 담은 배열을 뜻한다. 동적으로 많은 수의 아이템을 표시하거나 렌더링하는데 사용된다. List는 js의 .map() 함수를 사용해 각각의

Hook react에서의 hook은 함수형 컴포넌트에서 제공하는 함수 기능들의 묶음이다. 주로 상태를 관리하도록 도와주는 useState(), 컴포넌트의 렌더링 / 리렌더링과 함께할 작업을 지정해주는 useEffect(), 메모이제이션을 지원하는 useMemo()와 u

react에서 가장 많이 사용되는 훅은 useState()와 useEffect()가 있다. 이 외에도 같이 자주 사용하는 hook들을 살펴보자.memo()는 메모이제이션 기능을 제공하는 hook이다. 메모이제이션이란 컴퓨터 프로그래밍이 동일한 계산을 반복적으로 할 때,

useReft() `` 위와 같이 react에서 특정 태그 element에 접근하고자 하려면 어떻게 해야할까? react에서 바닐라 js처럼 document를 통해 태그 참조를 진행하면 react의 스스로 동작하여 계산하는 로직에 효율을 주지 못한다. 그러기에 리엑트가

컴포넌트를 제작하고 react 애플리케이션을 만들어 나갈 때, 컴포넌트가 계속 깊어진다는 불편이 발생할 수 있다. 이때 상태를 공유하기 위해 props를 계속 넘겨주는, props가 드릴처럼 하위 컴포넌트에 지속적으로 파고드는 번잡함이 발생한다. 이를 props 드릴링

Portal React Portal은 React 애플리케이션에서 모달, 팝업, 툴팁과 같이 현재 컴포넌트 계층 구조의 바깥에 UI를 렌더링하기 위한 기술입니다. 이를 통해 DOM 트리의 다른 위치에 컴포넌트를 렌더링할 수 있으며, 부모 컴포넌트의 스타일, 이벤트 처리

고차 컴포넌트 (HOC)는 컴포넌트 로직을 재사용하기 위한 reac의 고급 기술이다. 컴포넌트를 가져와 새 컴포넌트를 반환하는 일종의 함수이다. HOC는 리엑트의 일부가 아니며, 리엑트의 구성적 특성에서 나오는 패턴이다. 우리는 이미 고차 컴포넌트를 이전 포스트에서 한

Render Props는 react에서 컴포넌트 간 코드를 재사용하고 컴포넌트 간의 데이터를 공유하기 위한 패턴 중 하나이다. 이 패턴은 컴포넌트의 props로 전달된 함수를 사용하여 다른 컴포넌트에서 렌더링 로직을 구현할 수 있도록 돕는다.render props 패턴

상태는 컴포넌트간에 격리된다. react는 UI 트리에서의 위치에 따라 어떤 상태가 어떤 컴포넌트에 속하는지 추적한다. state를 보존할 시기와 리렌더링 되는 사이에 state를 재설정할 시점을 제어할 수 있다.브라우저는 많은 트리 구조를 사용하여 UI를 모델링한다.

React의 개발자가 할일 react 개발자가 React처럼 사고하는 것은 코드를 효율적으로 작성하고 유지 관리하기 위해 중요하다. 또한 react의 흐름을 이해하고 이를 잘 분석하여 react의 목적과 의의에 맞는 최적화된 웹 개발에 방향성을 맞출 수 있기 때문이다

React DevTools는 React 애플리케이션의 디버깅과 개발을 돕기 위한 브라우저 확장 프로그램이다. 효율적인 디버깅을 눈으로 직접 확인할 수 있기에 react 애플리케이션을 개발하는 꼭 설치하는 것을 권장한다. ReactDevTools는 다음과 같은 특징과 기

Create React App을 통해 만들어진 React App을 확인하면, 랜더링 되는 index 파일에 위와 같이`React.StrcitMode` 라는 컴포넌트가 `App` 컴포넌트를 감싼 것을 볼 수 있다..

컴포넌트 재조정은 react가 가상 DOM을 사용하여 변경된 부분만 실제 DOM에 업데이트하는 프로세스이다. 컴포넌트의 상태(state)나 프로퍼티(props)가 변경되었을 때 발생하며, Virtual DOM을 활용하여 변경 부분을 효율적으로 탐지한다.