React가 버전 18로 업데이트 되면서 많은 부분이 변화하였는데, 가장 주목 할 만한 변화 사항은 React 18 버전이 더 이상 ReactDOM.render 을 지원하지 않는다는 것이다. 그 대신에 React 18 버전에서는 createRoot API 를 사용하게

useMemo는 렌더링 최적화를 위한 Hook 중 하나로, 특정 value값을 재사용하고자 할 때 사용하는 Hook이다.Calculator 컴포넌트는 props로 넘어온 value 값을 calculate 함수에 인자로 넘겨 result 값을 구한 후, div 엘리먼트로

Hooks는 함수 컴포넌트에서 사용하는 메서드를 뜻한다. Hooks에 대해 제대로 이해하려면, 우선 함수 컴포넌트(Function Component)와 그 이전 React 개발에 사용하던 클래스 컴포넌트(Class Component)를 비교할 필요가 있다. Clas

Virtual DOM > Real DOM (기존의 DOM) > * Real DOM (Virtual DOM과 비교하기 위해 이렇게 부른다) 이란, 브라우저가 트리 구조로 만든 객체 모델 > * 트리 구조이기 때문에

이제 본격적으로 리액트 웹앱을 번들링한 후, 배포까지 해보자! create-react-app 없이, 리액트를 웹 팩으로 빌드해보자 우선, 리액트로 개발하기 위해 필수적인 두 라이브러리를 설치한다 ` 번들링을 하는데 필요한 웹팩 관련 라이브러리 역시 설치해준다. 웹팩은

상태 변경의 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성된다.이 Action 객체가 Dispatch 함수의 인자로 전달된다.Dispatch 함수는 Action 객체를 Reducer 함수로 전달해준다Reducer 함수는 Action 객체의

1. CDD > >CDD (component-Driven Dvelopment) CDD를 사용하면 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진행할 수 있다. 이렇게 하면 여러 프로젝트 간에 같은 UI 컴포넌트를 사용할 수 있다. (재사용할 수 있는 UI 컴포넌트

StatesAirline Server API를 사용한다. (클라이언트에서 항공편을 조회할 때 사용되는 API)검색 조건과 함께 StatesAirline 서버에서 항공편 정보를 요청하도록 한다. (fetch를 이용하여 getFlight 함수를 REST API 호출로 대신

sideEffect side Effect란, 순수 함수적인 특징에 위배되는 기능들을 말한다. > > 순수 함수? > * 어떤 값이 들어왔을 때, 일관된 값만 나와야 한다. > * 즉, 어떠한 전달 인자가 주어질 경우, 항상 똑같은 값이 리턴되어야 한다. > * 그

React 먼저 컴포넌트 만들고 다시 페이지 조립해나가는 방식즉, 상향식 (bottom-up)으로 앱을 만든다React 컴포넌트자식 컴포넌트 바깥에서 props 이용해 데이터를 마치 전달인자, 속성처럼 전달받는다.이 때, 데이터를 전달하는 주체는 부모 컴포넌트이다.즉,

props(property)?성별이나 이름처럼 외부로부터 전달받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다.부모 컴포넌트로부터 전달받은 값이며 객체 형태이다. (어떤 타입의 값을 넣어도 전달할 수 있다!)외부로 부터 전달받은 변하지 않는 값,

전통적 웹사이트 (Multi Page Application): 웹사이트 내의 다른 페이지로 이동할 때 페이지 보여주기 위해서 매번 HTML 파일로 된 '페이지 전제'를 불러옴SPA (Single Page Application): 웹사이트 내의 다른 페이지로 이동할 때

오늘 처음으로 리액트를 접하게 되었다. 문법이 아직은 생소하고 어렵기는 하지만 확실히 기존의 'html,css를 작성하고 dom을 또 작성해 html코드를 업데이트하던 방식'보다는 간편하고 이해하기도 쉬운 것 같다. 그럼 React Intro 유닛에서 학습한 내용을 정