Web/React

개요React State저번에 React Lifecycle에 대해 공부하면서, 함수형 컴포넌트에서는 생명주기와 state를 적용하기 위해서는 Hook이라는 것을 사용해야 한다고 했는데 오늘은 React Hook에 대한 내용을 정리해보겠다.  1. React Hook 이란?함수형 컴포넌트에서도 상태(state)와 생명주기 메서드를 사용할 수 있도록 해주는 기능이다.이전에는 클래스 컴포넌트를 사용해야만 state나 componentDidMount 같은 생명주기 메서드를 활용할 수 있었지만, Hook을 통해 함수형 컴포넌트에서도 동일한 기능을 구현할 수 있다. 하나씩 어떤 종류가 있는지 알아보자. 2. React Hook 종류2-1. useState-> 사용자의 입력 값을 저장하거나 UI에서 값이 변경될 때마..

개요State란? 자 State에 이어 이번에는 React 컴포넌트의 생명주기에 대해 정리해보자. 1. React LifeCycle리액트의 모든 컴포넌트에는 생명주기가 존재한다. 생명주기에 따른 작업에 대해 잘 알고 있어야, 리렌더링을 불필요하게 하지 않게 되고, 성능에  큰 영향을 주기 때문에 반드시 알아야하는 개념이라고 생각한다. 가장 큰 틀로 생성(Mounting) -> 업데이트(Updating) -> 제거(UnMounting)으로 존재하고, 세부적인 메서드들을 통해 필요한 작업을 설정할 수 있다. 클래스형 컴포넌트와 함수형 컴포넌트 각각 다른 방식으로 생명주기를 관리하는데, 함수형 컴포넌트에서는 Hook이라는 것을 통해 컴포넌트 생명주기를 관리할 수 있다. 하나씩 단계별로 알아보자. 2. 클래스형..

개요Component와 Props 하루하루 나름 꾸준하게 계속해서 React에 대한 개념을 하나씩 잡아가고 있다. 어제는 Component와 Props에 대한 내용을 정리했고, 오늘은 State에 대해 정리해보려고한다.생각보다 근데 State라는 개념이 어려우면서도 이해가 되는(?) 복잡 오묘하다... 1. State란?앞서 정리했던 Props는 부모 컴포넌트에서 자식 컴포넌트로 내려주는 읽기만 가능한 (= 자식 컴포넌트에서 변경 불가능한) 데이터라고 했다. 반면, State는 동적인 데이터를 관리하는 객체로 컴포넌트 내부에서 관리되고, 변경될 수 있다. State가 변경될 때마다 React에서 자동으로 UI를 렌더링 해주기 때문에, 사용자 이벤트에 의해 데이터가 변경되어 새로운 데이터로 렌더링이 필요할..

개요React Element란? 오늘은 React의 Component와 Props에 대해 정리해야지. 1. Component란?UI를 구성하는 독립적인 단위로, 재사용이 가능한 JavaScript 함수 또는 클래스이다. 화면의 특정 부분을 렌더링하며, 데이터(Propos 또는 State)에 따라 다르게 동작할 수 있다. * Element와의 차이?-> React Element는 UI를 표현하는 객체이다.-> React Component는 여러 개의 Element를 포함할 수 있는 재사용 가능한 단위이다. 1-1. 특징: 재사용 가능-> 하나의 컴포넌트를 여러 곳에서 사용이 가능하다. : 독립적-> 각 컴포넌트는 독립적으로 동작하며, 특정 부분만 변경이 가능하다. : 구성 가능-> 여러 개의 작은 컴포넌트..