공삼
article thumbnail
React 라이프사이클 (함수 컴포넌트, 클래스 컴포넌트)
Front-End/React 2023. 8. 29. 13:01

React 라이프 사이클 리액트는 컴포넌트단위로 생성되는데, 이 컴포넌트들은 생명주기를 갖고있다. 생성부터 시작하여 업데이트, 소멸 되는 과정을 라이프사이클 이라고 한다. 리액트 v16.3 이전에는 클래스 컴포넌트의 라이프사이클이 메서드로 주로 다뤄졌지만, v16.3 이후부터는 함수 컴포넌트에서도 라이프사이클에 대한 기능이 Hooks를 통해 도입되었다. 함수 컴포넌트 함수형 컴포넌트는 리액트의 함수 컴포넌트 기능과 Hooks를 활용하여 UI를 구성하는 방식이다. 함수컴포넌트 예시코드 import React, { useState } from 'react'; function FunctionalComponent() { const [count, setCount] = useState(0); return ( Cou..

article thumbnail
(React) 컴포넌트/엘리먼트 차이, JSX란?
Front-End/React 2023. 2. 15. 00:48

Component (컴포넌트) 컴포넌트는 데이터를 가진 props 객체인자를 받아 element를 반환한다. UI를 재사용 가능한 개별적인 여러 조각으로 나눈 것으로, 엘리먼트 트리를 캡슐화 하는 것이다. Element (엘리먼트) element는 component를 이루는 작은 단위로, 보통 바로 사용되지 않고 Component에 리턴받아서 사용되곤 한다. 엘리먼트는 인스턴스가 아니다. 엘리먼트는 immutable한 plain object이다.(엘리먼트가 생성되면, 절대로 변화되지 않는다.) PlainObject 오래된 방식의 단순 자바 객체다. 조금 더 디테일한 의미는 특별한 환경(클래스나 인터페이스 등)에 종속되지 않는 일반적인 Java 객체를 의미한다. 이 단순 자바 객체는 다른 클래스나 인터페이..