CS 스터디 - React

"컴포넌트"라고 불리는 작고 고립된 코드의 파편을 이용해 복잡한 UI를 구성하도록 돕는다.javaScript만을 사용하여 화면을 구현하려면 관리가 힘들고, 웹 애플리케이션의 규모가 커질수록 성능 저하의 원인이 될 수 있다.리액트는 가벽고 유연한 라이브러리로, 필요한 부

React의 원리 React의 특징 1. Data Flow(단방향 데이터 바인딩) React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다. 이 뜻은 데이터가 부모 -> 자식의 방향으로만 흐른다는 뜻이다! 2. Component 기반 구조

Virtual DOM이란 실제 DOM에 접근하여 조작하는 대신 이를 추상화하여 자바스크립트 객체를 구성해 사용하는 것실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM을 조작하는 작업이 무겁기 때문이다.때문에 실제 DOM의 변경 사항을

하나의 파일에 javascript와 html(xml)을 동시에 작성하여 js 코드 안에서 UI 관련 작업이 가능하기 때문에 시각적으로 도움이 된다.또한, JSX를 사용하면 React가 더욱 도움이 되는 에러 및 경고메시지를 표시할 수 있게 해준다.Virtual DOM에

엘리먼트는 React가 UI를 표현하는데 사용하는 가상 DOM 요소를 나타낸다.React 엘리먼트는 실제 DOM 요소가 아니라, React에 의해 생성된 가상 DOM에 속하는 객체이다.엘리먼트는 불변(immutable)하며, UI의 상태를 나타내기 위해 사용된다.JSX

리액트 컴포넌트에는 생명 주기라는 것이 있는데 이것을 라이프 사이클이라고 표현한다.라이프 사이클이란 컴포넌트가 실행되거나, 업데이트 또는 제거될 때 특정한 이벤트들을 호출하는 것이다.출처: http://projects.wojtekmaj.pl/react-life

반복문이나 조건문 혹은 중첩된 함수 내에서 Hook을 호출할 수 없다. \- 리액트 훅은 호출되는 순서에 의존하기 때문에 조건문이나 반복문 안에서 실행될 경우 해당 부분을 건너뛰는 일이 발생할 수도 있기 때문에 순서가 꼬여 버그가 발생할 수 있기 때문이다!!위의 규칙

useEffect는 브라우저가 화면을 그리고 나서 비동기적으로 실행된다.=> 즉, 컴포넌트의 렌더링이 완료된 이후에 실행된다.useEffect 안의 코드는 렌더링 결과를 기다리지 않고 비동기적으로 실행되기 때문에, 렌더링 작업에 영향을 주지 않는다.주로 데이터 가져오기

일반적인 클래스 컴포넌트에서는 shouldComponentUpdate 메서드를 사용하여 새로운 props나 state가 변경되었을 때 컴포넌트가 리렌더링되어야 할지 여부를 결정하는데, 이 메서드를 개발자가 직접 작성해야 했다.Pure Component는 shouldCo

각 컴포넌트는 자체적으로 상태를 가질 수 있으며, 이 상태는 컴포넌트가 렌더링될 때 사용되며, 변경되면 컴포넌트가 리렌더링된다.state는 컴포넌트가 동적인 데이터를 관리하고, 이 데이터에 기반하여 화면을 업데이트할 수 있도록 도와준다. => 예를 들어, 버튼 클릭,

작성중

작성중

작성중

불변성이란, 변하지 않는 성질을 뜻한다.즉, 불변성을 유지해야 한다는 말은 초기에 할당한 값 자체를 변경하면 안된다는 것!useState(초기값)에서 초기값을 setState가 아닌 방법으로 변경하면 안된다는 것이다.setState을 활용하면 된다!setState 함수

=> 컴포넌트를 인자로 받아서 새로운 컴포넌트를 반환하는 함수!=> 때문에 같은 로직을 다수의 컴포넌트에 동일 적용해야할 때 굉장이 유용하다.=> 컴포넌트는 props를 UI로 변환시키지만, HOC는 컴포넌트를 다른 컴포넌트로 변환한다.=> 고차 컴포넌트는 Redux의

=> 앱에서 컴포넌트에게 props를 사용하지 않고 필요한 데이터(state)를 쉽게 공유할 수 있게 해준다. => 따라서 앱의 모든 컴포넌트에서 사용할 수 있는 데이터(state)를 전달할 때 유용하다.리액트에서는 부모 컴포넌트에서 자식 컴포넌트에게 props를 통해

=> DOM에 별도의 노드를 추가하지 않고 여러 자식 Element들을 그룹화할 수 있는 기능이다.=> 기본적인 사용법은 아래 코드와 같이 자식 요소들을 감싸주는 형태로 사용한다.=> 주로 JSX에서 반환되는 요소가 여러 개인 경우에 사용된다. 예를 들어, 배열의 요소

Portal은 부모 컴포넌트의 Dom 계층 구조 바깥에 있는 Dom 노드로 자식을 렌더링하는 방법을 제공한다.=> 리액트 포탈을 사용하면 독립적인 위치에서 렌더링하기 때문에 DOM 계층 구조와 상관없이 편리하게 사용이 가능하다.(기존 컴포넌트의 구조에 영향을 주지 않는

=> 트리 대신 폴백 UI를 보여주는 React 컴포넌트로 에러 경계는 렌더링 도중 생명주기 메서드 및 그 아래에 있는 전체 트리에서 에러를 잡아낸다.=> 에러 바운더리를 설정해주면 바운더리 내의 컴포넌트와 그 하위 컴포넌트에서 발생하는 에러를 감지해서 fallback

=>이를 통해 계산 시간을 줄이고 성능을 개선할 수 있다.React에서는 메모이제이션을 주로 컴포넌트의 재렌더링을 방지하거나, 성능을 최적화하기 위해 사용한다. React에서 메모이제이션을 구현하는 주요 방법은 React.memo, useMemo, 그리고 useCall

프론트 단의 UI구성은 React로 하고, Next.js를 사용해 추가 기능과 최적화 수행 가능리액트에 없느 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 증분 정적 재생성(ISR)과 같은 다양한 기능들을 제공클라이언트 사이드 렌더링(CSR)의 경우 모든

리액트에서 폼을 다룰 때, 주로 두 가지 방법이 사용되는데, 제어 컴포넌트와 비제어 컴포넌트이다.리액트에서 폼 요소를 제어 컴포넌트로 만들면 값이 리액트의 상태에 의해 제어된다. 이렇게 하면 값의 변경을 감지하고 다루기가 훨씬 수월하다.폼 요소의 상태는 컴포넌트의 st

React Hook Form 리액트에서 사용하는 폼 라이브러리로, 폼 구현이 간단해지고 높은 유연성과 유효성 검사가 가능하다. => onChange나 handler를 굳이 설정하지 않아도 간단하게 폼 구성이 가능하다! React Hook Form 장점 1. 성능 최적

Redux를 사용하면 전역 상태를 관리할 수 있고, 이는 여러 컴포넌트에서 사용되는 데이터를 쉽게 공유하고 업데이트 할 수 있도록 해준다.컴포넌트와는 별개로 스토어라는 공간이 있어서 그 스토어 안에 앱에서 필요한 상태를 담는다.컴포넌트에서 상태 정보가 필요할 때 스토어

사용자 입력을 기반으로 Action을 만들고 Action을 Dispatcher에 전달하여 Store(Model)의 데이터를 변경한 뒤 View에 반영하는 단방향의 흐름으로 애플리케이션을 만드는 아키텍처Action은 애플리케이션 내에서 일어나는 모든 이벤트를 나타낸다.

Context API는 props drilling 문제를 해결할 수 있기 때문에 전역 상태를 관리하거나, 여러 컴포넌트 간에 데이터를 전달할 때 유용하다.React.createContext 함수를 사용하여 새로운 Context를 생성한다.Provider 컴포넌트는 Co

=> 리액트에서 서버 상태를 관리하는데 도움을 주는 라이브러리React Query는 클라이언트 애플리케이션에서 서버 상태를 효율적으로 관리하고, 서버와의 데이터 동기화를 쉽게 하기 위해 등장했다.전통적인 상태 관리 라이브러리(예: Redux, MobX)로 서버 데이터를

React 애플리케이션에서 전역 상태를 관리하고, 복잡한 상태 로직을 단순화하기 위해 설계되었다. React의 기본 상태 관리 메커니즘과 긴밀하게 통합되어 있으며, 상태를 효율적으로 공유하고 관리할 수 있는 기능을 제공한다.npm install recoilRecoil의