React - Component & Props 이해하기

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서는 React 에서 가장 중요하게 다루게 될 Component & Props 에 대해서 알아보도록 하겠습니다.

React 를 다루기 위해서 가장 중요한 개념이 될 두가지를 알아보도록 하겠습니다.

 

=========

1. Component 의 종류

2. Props

3. React Data 흐름

=========

 

1. Component 의 종류

 

Component 는 크게 "Function Component", "Class Component" 두가지가 존재합니다.

즉 함수형 컴포넌트, 클래스 컴포넌트라고 불리우게 되는데, 이는 이미 JavaScript 에서 우리가 작성을 해보았던 개념입니다.

예시를 간단하게 살펴보도록 하겠습니다.

 

1) Function Component

const Text = (props) => {
  return <h1>Hynn Tistory Blog</h1>
}

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<Text />)

2) Class Component 

class Test extends React.Component {
            constructor(props){
                super(props)
            }

            render(){
                return <h1>Hynn Tistory Blog</h1>    
            }
        }
        const root = ReactDOM.createRoot(document.getElementById('root'))
        root.render(<Test />)

 

표현방법은 분명히 다른 것처럼 보이지만, React 의 관점에서는 동일한 코드처럼 인지가 될 수 있는 코드입니다.

여기서 볼 수 있는 공통점은 바로 "Props" 라는 인자값입니다. 

기존의 JavaScript 에서는 매개변수(인자)를 다양한 형태의 이름으로 작성을 했습니다. 가령 예를 들면 아래와 같은 코드들이 존재할 겁니다.

addEventListener((e)=>{
            console.log(e.target)
        })
        
map((v)=>{
            console.log(v)
        })

 

 

2. Props

 

하지만 React 에서의 Component 에서는 Properties 라는 의미를 가지고 있는 "Props"가 React Component 에 전달되는 매개변수의 모음을 담고 있는 JavaScript 객체를 뜻합니다. 

즉, 사소하게는 매개변수와 같은 인자값 뿐 아니라, Element (요소)에 부여된 속성값까지 모두 포함하고 있는 객체로 설정됩니다.

위의 예제화면을 살펴본다면, root.render 를 할 때, 작성자가 "Test" 라는 class Compnent 를 랜더링 할 때, name, className, Id 및 value 의 Properties 를 부여한 결과물이 React 에서 Props 라는 매개변수에 객체형태로 저장된 것을 나타내고 있습니다.

 

하지만 몇가지 주의해야 할 사항도 존재합니다.

바로 몇몇 구문의 경우, JSX 에서 기존의 HTML 과 비교하여 몇가지 다른 구문이 존재합니다.

 

아래의 예시는 일부입니다. 

1. Class => className
<div className="Class"></div>

2. for => htmlFor
<label htmlFor="text"></label>
<input type="text" id="text" />

3. tabindex => tabIndex
<div tabIndex="1"></div>

기존의 HTML 의 요소와, JavaScript 에서 사용되는 예약어가 중복될 경우, 별도의 구분을 해주거나,

카멜 표기법 (ex. helloworld > helloWorld) 같은 형식으로 수정해야 올바르게 동작이 가능합니다.

 

Props 의 경우 사용에서 주의해야 할 원칙이 한가지 존재합니다.

바로 Props 자체는 "Read Only", 즉 "읽기 전용" 으로 사용해야 합니다.

 

3. React Data 흐름

 

React 는 기본적으로 양방향이 아니라, "단방향" 으로 데이터 흐름 패턴을 갖게 됩니다.

이 흐름을 그림으로 표현하면 아래와 같습니다.

 

 

단순하게 그린 React 의 Component Tree 입니다.

HTML 에 비유를 하자면, 가장 위에 있는 Root 내에 3개의 Head,Body,Footer 가 있고, 그 3개의 루트에는 각각의 component 가 존재하는 형태로 이루어져 있습니다.

즉 데이터는 가장 최상단의 있는 Root 에서 내려가는 형태입니다.

만약 최상위 Root 에 "Props"로 name=Hynn 을 부여하면, 하위의 자식 Component 에 모두 전달이 됩니다.

 

즉, 이 Chlidren Component 는 props 를 통해 이러한 값을 전달받으면, UI 를 랜더링할 수 있습니다.

하지만 이 값을 바꿀 수 없다면 의미가 없다고 이해할 수도 있겠지만, 자식 Component 는 사용자 상호작용(User Interaction) 이나, Event 에 기반하여 "업데이트" 를 할 수 있습니다. 즉 데이터를 수정하는 것이 아니라, "업데이트" 하는 개념으로 접근해야 합니다.

 

예컨대, Chlidren Component 가 데이터를 업데이트 해야 할 경우, "State" 라는 개념을 사용하거나, 상위 Component(부모) 에서 전달받은 함수를 호출하여, "State"를 업데이트 해야 합니다. 이를 통해 전체 UI가 다시 랜더링 되므로, UI와 Application 상태가 일치하도록 유지됩니다.

 

React 에서 이러한 Component 가 중요한 개념인 것은, React 의 기본 데이터 흐름이 단방향 데이터 흐름 패턴을 사용하고 있기 때문입니다.

이러한 데이터 흐름 패턴은 Application 의 상태의 변경사항이 예측이 가능하고, 이해하기 쉽게 구성이 되어 있기 때문입니다. 이러한 데이터 흐름을 하나의 방향으로 일관성 있게 유지하면, 동시에 여러 Component 가 동시에, 동일한 데이터 소스를 업데이트 할 때 발생할 수 있는 일관성 및 여러 문제를 방지할 수 있기 때문입니다.

 

다음 포스팅에서는 위에서 언급한 "State" 에 관련된 포스팅을 다루어보도록 하겠습니다.

 

감사합니다.