리액트 - 2

1. 리액트 동작원리

이해를 돕기 위해 가상 세계에서 공원에 놀러 간다고 생각해 보자.🤔

공원 안에는 여러 개의 놀이기구가 있고, 우리는 각각의 놀이기구에서 즐거운 시간을 보내고 싶어 한다.

하지만 매번 놀이기구에서 놀 때마다 전체 공원을 다시 만들지는 않잖아?

여기서 리액트는 놀이기구(컴포넌트)를 효율적으로 관리하고, 만약 어떤 컴포넌트에서 변경이 일어난다면

그 부분만 바꿔서 공원(웹 페이지)을 업데이트해준다. 이렇게 하면 놀이기구를 즐기면서도 전체 공원을

새로 만들 필요가 없어진다.(❁´◡`❁)

 

이번에는 코드를 통해서 리액트의 동작 원리를 예를 들어 설명해 보겠다.

가정해 보자. 우리는 간단한 웹 페이지에서 글을 보여주는 컴포넌트(`Post`)와

사진을 보여주는 컴포넌트(`Image`)를 가지고 있다고 상상해 보자.

// Post 컴포넌트
function Post(props) {
  return <div>{props.content}</div>;
}

// Image 컴포넌트
function Image(props) {
  return <img src={props.src} alt="이미지" />;
}

// 메인 앱 컴포넌트
function App() {
  return (
    <div>
      <Post content="안녕하세요! 리액트 세계에 오신 걸 환영합니다." />
      <Image src="사진주소" />
    </div>
  );
}

이제, 사용자가 글의 내용을 바꾸려고 한다고 생각해 보자. 그럴 때 리액트는 매우 효율적으로 동작한다.

1. 사용자가 글 내용을 변경하면, `Post`컴포넌트만 업데이트한다. `Image`컴포넌트는 변경되지 않는다.

2. 리액트는 바뀐 부분만을 실제 브라우저 DOM에 업데이트한다. 전체 페이지를 새로고침하지 않고도 

변경된 내용만 업데이트되어 빠른 화면 전환이 가능하다.

3. 사용자가 다시 사진을 변경하려고 해도, `Image`컴포넌트만 업데이트된다. 다른 부분은 건드리지 않는다.

 

이렇게 리액트는 각 컴포넌트를 놀이기구처럼 독립적으로 다루면서 필요한 부분만 변경해 줘서

웹 페이지를 업데이트하는 것이다. 

 

좀 더 깊게 다이브 해보자.

* React

데이터를 State(내부 상태) Props(외부로 부터 전달받은 상태)

나타내는 render가 있다.

상태가 변경될 때마다 re-render된다.

 

* React Hooks

리액트 훅은 함수 컴포넌트에서 상태 관리와 다양한 리액트 기능을

사용할 수 있게 해주는 기능이다.  이전에는 클래스 컴포넌트에서만

가능했던 상태 관리와 생명주기 관리를 함수 컴포넌트에서도 간편하게 할 수 있게 해 주는데...

 

클래스 컴포넌트가 또 무엇인가?🤔 (코드를 통해 간단하게 살펴보고 넘어가자...)

 

클래스 컴포넌트

함수 컴포넌트

보기에도 함수 컴포넌트가 훨씬 간단하지 않은가?

`useState`훅을 사용하여 상태를 관리하고, 상태를 업데이트할 때는 `setCount`함수를 호출한다. 

함수 컴포넌트에서도 상태와 이벤트 처리를 간편하게 다룰 수 있게 된 것이다. 🥹

 

다음에 리액트 훅을 좀 더 자세하게 공부해 보겠다.