[공부하면서 쓰는] React 기본 개념과 생명주기 (life-cycle)

1. 개요 

 

최근에 인텔리픽 면접코칭을 마치면서 리액트의 기본 개념과 생명주기를 물어보셨을 때 대답을 정확히 하지 못한

아쉬움이 있었고,  리액트에 대한 기본 개념 공부부터 꾸준히 하라는 피드백을 주셔서 리액트 공부한 내용을 바탕으로 정리를 해보려고 합니다. 공부하면서 쓰는 내용이기 때문에 부족한 내용이 다소 보일 수 있는 점 양해 부탁드립니다. 

 

 

2. 목차 

 

- 리액트란? 

- 리액트의 기본 개념 (컴포넌트, jsx, props, state) 

- 생명주기 ( Life-cylcle) 

- 글을 마치며 

 

---

리액트란? 

 

페이스북 (Facebook)에서 개발한 오픈소스 라이브러리이며 사용자의 인터페이스(UI)를 구축하는 데에 사용합니다. 

주로 SPA(Single page application)에서 복잡한 사용자 인터페이스를 쉽게 관리하고 성능을 최적화하는 데에 중점을 둡니다 .

 

spa란? 단일 페이지 어플리케이션을 의미하며 웹 애플리케이션 ,또는  웹사이트의 모든 콘텐츠를 하나의 HTML 페이지에서 로드하고 관리하는 방식입니다. (GPT에서 설명하는 SPA의 의미) 

 

 

리액트의 기본 개념 

 

★ 컴포넌트 

 

 리액트 공식 문서에서 말하는 컴포넌트의 정의 

-  Javascript 클래스로 정의된 리액트 구성 요소의 기본 클래스입니다. 클래스 구성 요소는 여전히 React에서 지원되지만 새 코드에서는 사용하지 않는 것이 좋습니다.

import { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }

 

 

★ JSX

- 자바스크립트를 확장한 문법으로써 html과 유사한 문법을 사용하며 , 자바스크립트 안에서 HTML을 작성할 수 있게

합니다.  반드시 부모요소 하나만 감싸는 형태여야 합니다. 

function App() {
 return (
 <div>
   <h1> Hello, world!</h1>
 </div>
 )
}

 

 

★ props

-  컴포넌트가 외부로부터 전달받는 데이터로써 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할때 사용합니다 

! 읽기 전용 데이터로 값을 변경할수는 없음 

function Todo ({title,content,isDone}) {
	return <div>{title}</div>
}

 

 

★ state

- 컴포넌트 내부에서 바뀔 수 있는 값을 뜻합니다.상태가 변경될 때 해당 컴포턴트가 다시 랜더링됩니다. 

주로 useState라는 훅을 사용합니다. 

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>you {count} on!</p>
      <button onClick={() => setCount(count + 1)}>
        버튼을 클릭해주세요
      </button>
    </div>
  );
}

export default Counter;

---

 

리액트의 생명주기 (Life-cycle) 란?

 

컴포넌트가 생성되어 화면에 나타나고 업데이트되며 사라질 때까지의 과정을 의미합니다. 크게 3단계로 나눌수 있는데

마운트 (Mounting) > 업데이트 (Updating) > 언마운트 (Unmounting) 단계로 진행됩니다. 클래스형 컴포넌트에서 주로

많이 사용되었는데 최근에는 함수형 컴포넌트와  useEffect를 활용한 관리가 많이 사용됩니다. 

마운트 (Mounting) 단계는 컴포넌트가 처음 생성되어 DOM에 삽입되는 과정이며 업데이트(Updating) 단계에선 props나 state가 변경될 때마다 업데이트됩니다. 마지막 언마운트(Unmounting) 단계에서는 컴포넌트가 DOM에서 제거될 때 발생하는 단계입니다. 

 

함수형 컴포넌트에서는 useEffect() 훅을 사용하여 모든 생명주기 단계를 처리할 수 있고, 의존성 배열을 사용해 특정 시점에서만 효과를 실행하거나 정리 작업을 수행할 수 있습니다. 

 

useEffect(() => {
  // 컴포넌트가 마운트된 후 실행됨
}, []);  // 빈 배열은 의존성 배열을 의미하며, 특정 시점에서만 효과가 실행됨

 

 

출처 : 리액트 공식문서 , 스파르타 코딩클럽 리액트 기초 강의 자료 활용 ,챗 gpt 

 

---

 

마치며 

 

이로써 리액트의 기본 개념과 생명주기에 대해 자세히  알아보았습니다. 리액트는 회사에서도 많이 사용하기 때문에 프론트엔드 취직을 위해선 배워두는 것도 좋다고 생각됩니다. 최대한 기술 블로그처럼 쓰려고 노력했으나 부족한 부분이 보여도 감안하며 봐주셔서 감사합니다 🙂