컴포넌트

UI를 나타내는 독립적인 모듈이다. 각각의 컴포넌트는 자체적인 상태를 가지며, 컴포넌트 간의 상호작용을 위한 프로퍼티(props)를 전달 받는다. 덕분에 개발자는 UI조합이 가능하게 되고, 재사용을 통해 효율성과 유지보수성이 향상된다.

상태(State)

컴포넌트에서 상태란, 컴포넌트 내부에서 관리되는 상태다. 상태를 관리하는 최종적인 이유는 사용자의 경험(UX)개선이다. 상태관리를 함으로써 불필요한 랜더링을 방지하여 변경된 부분만 업데이트 할 수 있다. state를 변경하면 리액트가 자동으로 컴포넌트를 다시 랜더링 해준다.

랜더링(rendering) : 데이터를 기반으로 화면에 뷰(View)를 그리는 것을 말한다. 컴포넌트가 업데이트 되거나 초기 랜더링 시 랜더링이 발생한다.

예시

import React, {useState} from 'react';

function MyComponent() {
	const [count, setCount] = useState(0);
    function handleClick() {
    	setCount(count + 1);
    }
    
    return (
    	<div>
        	<p>You clicked {count} times</p>
            <button onclick={handleClick}>Click Me</button>
        </div>
    );
}

useState는 리액트 Hook 중에 하나로, 나중에 자세히 다루도록 한다. useState는 count의 상태값과 setCount 함수를 반환한다. 여기서 count는 현재 상태를 나타내고, setCount는 상태를 변경하는 함수다(이전 상태를 매개 변수로 받음).

handleClick 함수를 호출하게 되면 setCount가 업데이트가 된다. 이렇게 되면 상태가 업데이트 되었다고 할 수 있다.

함수형 컴포넌트

간단한 UI를 구성할 때 사용한다. Javascript 함수로 구현하고 입력된 props에 따라 UI를 반환하는 역할을 한다.

예시

import React from 'react';

function MyConponent (props) {
	return (
    	<div>
        	<h1>{props.title}</h1>
            <p>{props.text}</p>
        </div>
    );
}

export default MyConponent;

위의 컴포넌트는 MyConponent 함수형 컴포넌트를 정의했다. props를 인자로 받아서 title, text를 출력한다.

props

부모 컴포넌트로부터 자식 컴포넌트로 전달되는 값들을 말한다(전달된 값들은 자식 컴포넌트에서 읽기전용(read-only)로 사용된다/ 직접 수정이 불가능). 덕분에 컴포넌트 간에 데이터를 주고 받을 수 있다.

function App() {
	return (
    	<div>
        	<Hello name="John" />
        </div>
    );
}

function Hello(props) {
	return (
    	<div>
        	Hello, {props.name}!
        </div>
    );
}

App 컴포넌트에서 name 프로퍼티를 전달하여, Hello 컴포넌트에서 props 매개변수로 받아서 사용했다.

클래스 컴포넌트

클래스를 사용하여 정의된 컴포넌트를 클래스 컴포넌트라 한다(React.Component 클래스를 상속 받는다). 주로 상태를 관리하거나 컴포넌트 라이프 사이클 메서드를 사용할 때 사용한다.

예시

import React from 'react';

class MyConponent extends React.Component {
	constructor(props) {
    	super(props);
        this.state = { count : 0 };
    }
    
    handleClick = () => {
    	this.setState((prevState) => ({ count : prevState.count + 1 }));
    };
    
    render() {
    	return (
        	<div>
            	<h1>Count: {this.state.count}</h1>
                <button onclick={this.handleClick}>Increase Count</button>
            </div>
        );
    }
}

export default MyComponent;

MyComponent라는 클래스 컴포넌트를 생성했다. this.state와 this.props를 사용하여 상태와 속성을 관리한다. this.state는 count라는 상태를 갖고 있고, handleClick 메서드는 count 상태를 업데이트 해준다.

handleClick은 이전 상태를 업데이트 하는 함수를 인자로 전달하여 이전 상태를 기반으로 새로운 상태를 계산하고 업데이트 한다. 이전 상태를 직접 참조하면 안되는 이뉴는 'React의 불변성 법칙' 때문이다. 변경할 때마다 새로운 상태를 생성해야 하고 이전 상태는 변경하면 안된다.

정리하기

이번에는 React의 컴포넌트에 대해 공부했다. React에서 가장 중요한 부분이 컴포넌트라 생각한다. 가장 기초적인 부분이기 때문에 잘 다져서 다음 단계로 넘어가야된다. 개인적으로 핵심은 독립적인 모듈이라는 것에 집중하려고 한다. 컴포넌트를 잘 활용하여 좋은 UI/UX를 개발하는 개발자가 되고 싶다.