리액트 프로그래밍: Props & State 마스터하기! 컴포넌트 데이터 제어

쉽게 배우는 리액트 프로그래밍

리액트 프로그래밍: Props & State 마스터하기! 컴포넌트 데이터 제어

todaypick124 2024. 10. 7. 18:11

리액트에서 컴포넌트는 UI를 깔끔하게 쪼개고 재활용하기 딱 좋은 기본 단위죠. 근데 이 컴포넌트 안에서 데이터를 어떻게 관리해야 할까요? 바로 props와 state라는 두 가지 주요 개념을 활용하는 거예요. 이 두 친구들이 어떤 역할을 하는지, 어떻게 사용하는지 자세히 파헤쳐 볼게요!

Props: 부모 컴포넌트에서 전달받는 데이터

props는 "properties"의 줄임말인데, 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때 사용하는 친구예요. 쉽게 말해 부모가 자식에게 선물을 주는 것과 비슷하다고 생각하면 돼요.

Props의 특징

읽기 전용: 자식 컴포넌트는 부모로부터 받은 props를 마음대로 바꿀 수 없어요. 그냥 선물 상자를 열어서 안에 있는 내용물만 확인하고 사용할 수 있는 거죠. 선물 포장지를 뜯어서 다시 꾸미거나 내용물을 바꾸면 안 된다는 거예요!
단방향 데이터 흐름: 데이터는 부모 컴포넌트에서 자식 컴포넌트로 한 방향으로만 흘러요. 자식이 부모에게 데이터를 다시 전달할 수는 없답니다. 마치 일방통행 도로처럼 생각하면 편해요.
예시 코드:
```
function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(element, document.getElementById('root'));
```
이 코드에서는 Welcome 컴포넌트가 name이라는 props를 받아서 화면에 "Hello, Sara"라고 인사를 건네는 역할을 해요. 마치 부모가 "Sara"라는 이름을 적은 카드를 자식에게 건네주고, 자식이 그 카드를 읽어서 인사를 하는 것과 같죠.

Props를 사용하는 이유

Props는 컴포넌트를 독립적으로 만들고 재사용하기 좋게 해줘요. 각 컴포넌트는 props를 통해 필요한 데이터만 받아서 사용하기 때문에, 컴포넌트 간의 의존성을 줄이고 유지보수를 쉽게 만들 수 있답니다.

예를 들어, 여러 개의 버튼을 만들어야 할 때, 각 버튼의 색깔, 글자 크기, 기능 등을 props로 전달하면 코드 중복 없이 다양한 버튼을 만들 수 있죠. 마치 레고 블록처럼 컴포넌트들을 조립해서 원하는 UI를 만들 수 있다는 거예요!

State: 컴포넌트 내부에서 관리하는 데이터

state는 컴포넌트 내부에서 직접 관리하는 데이터인데요. 사용자의 행동이나 다른 이벤트에 따라 변할 수 있는 데이터를 저장하는 역할을 한답니다.

State의 특징

변경 가능: State는 컴포넌트 내부에서 setState라는 메서드를 사용해서 직접 변경할 수 있어요. 마치 내 방을 꾸밀 때, 내가 원하는 대로 가구를 바꾸거나 장식을 추가할 수 있는 것과 같아요.
리렌더링 트리거: State가 변경되면, React는 해당 컴포넌트를 자동으로 다시 렌더링해요. 마치 내가 방을 새롭게 꾸미면, 방의 모습이 바뀌는 것처럼 말이죠.

예시 코드:

class Clock extends React.Component {
    constructor(props) {
        super(props);
        this.state = { date: new Date() };
    }

    render() {
        return (
            <div>
                <h1>Hello, world!</h1>
                <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
            </div>
        );
    }
}

이 코드에서는 Clock 컴포넌트가 현재 시간을 state로 관리하고 있어요. 시간이 바뀔 때마다 setState를 통해 state를 업데이트하고, 화면에 표시되는 시간도 자동으로 바뀌죠. 마치 시계가 시간에 따라 숫자가 바뀌는 것처럼 말이에요.

State를 사용하는 이유

State는 컴포넌트가 사용자와 상호 작용할 수 있도록 만들어주는 핵심 요소예요. 사용자의 클릭, 입력, 마우스 이동 등 다양한 이벤트에 반응해서 컴포넌트의 상태를 바꾸고, 화면을 동적으로 업데이트할 수 있게 해주는 거죠.

예를 들어, 체크박스를 클릭하면 해당 컴포넌트의 state가 변경되고, 화면에 표시되는 내용이 바뀌는 기능을 구현할 수 있답니다. 사용자가 뭔가를 클릭하면 그에 따라 화면이 바뀌는, 즉 동적인 UI를 만들 때 꼭 필요한 친구인 거예요!

Props와 State의 차이점 비교

특성	Props	State
정의	부모로부터 전달받은 데이터	컴포넌트 내부에서 관리되는 데이터
수정 가능성	수정 불가능	수정 가능
데이터 흐름	단방향 (부모 → 자식)	양방향 (컴포넌트 내부에서 변경 가능)
사용 예시	UI 구성 요소에 대한 설정	사용자 상호작용에 따른 상태 변화

리액트 컴포넌트 데이터 제어의 핵심: Props와 State

리액트에서 props와 state는 서로 다른 역할을 하지만, 둘 다 컴포넌트가 데이터를 관리하고 UI를 구성하는 데 핵심적인 역할을 해요. Props는 데이터를 전달하고 표현하는 역할을, state는 사용자와 상호 작용하면서 컴포넌트의 상태를 변화시키는 역할을 하죠.

이 두 가지 개념을 제대로 이해하고 활용하면, 훨씬 효과적이고 유연한 UI를 만들 수 있답니다. 마치 레고 블록을 가지고 다양한 모양을 만들 수 있는 것처럼, props와 state를 조합해서 원하는 UI를 자유롭게 만들 수 있어요!

자주 묻는 질문 (FAQ)

Q1. Props와 State 중 어떤 것을 사용해야 할까요?

A1. 데이터가 부모 컴포넌트에서 전달받아서 변경되지 않고 그대로 사용되어야 한다면 props를 사용하고, 컴포넌트 내부에서 사용자의 행동에 따라 변경되는 데이터를 관리해야 한다면 state를 사용하는 것이 좋습니다.

Q2. State를 변경할 때 왜 setState를 사용해야 하나요?

A2. React는 컴포넌트의 state가 변경될 때마다 화면을 다시 렌더링하는데, setState를 사용해야 React가 state의 변화를 감지하고 화면을 업데이트할 수 있습니다. 직접 state를 변경하면 React가 이를 인식하지 못해서 화면이 제대로 업데이트되지 않을 수 있어요.

Q3. Props와 State를 함께 사용할 수 있나요?

A3. 네, 물론입니다. 대부분의 컴포넌트는 props와 state를 함께 사용해서 더욱 복잡하고 다양한 기능을 구현합니다. props를 통해 부모 컴포넌트에서 데이터를 받아오고, state를 통해 컴포넌트 내부의 상태를 관리하는 거죠.

마무리

이 포스팅은 리액트 초보자를 위해 작성되었으며, 더욱 심화된 내용은 추후 포스팅에서 다룰 예정입니다. 궁금한 점은 언제든 댓글로 남겨주세요! 😊

키워드:리액트,React,프로그래밍,컴포넌트,데이터관리,Props,State,UI,ReactJS,개발,웹개발,프론트엔드,프론트엔드개발,자바스크립트,JavaScript,리액트튜토리얼,리액트강좌,리액트학습,컴포넌트기반,재사용성,단방향데이터흐름,양방향데이터흐름,리렌더링,setState,동적UI,ReactComponent,ReactTutorial,FrontendDevelopment,WebDevelopment,Developer,Coding,ReactProgramming,ReactFundamentals

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

투데이픽