리액트 시작하기 2 - Component로 기본 끝내기

❗이 글은 "리액트 시작하기 1"을 이해했다는 가정하에 진행되므로, 리액트 기본 개념을 아직 모른다면 "리액트 시작하기 1"을 보고 오는 것을 추천드립니다.

 

🚀Component로 기본 끝내기

Component의 의미는 "리액트 시작하기 1" 글에서 기본 예제 코드를 분석하며 아래와 같이 설명했다.

Component : 가독성 / 재사용성 / 유지 보수성을 높이기 위해 복잡한 HTML 코드를 모듈화 할 수 있는 최소 단위

리액트 시작하기 1의 화면 캡처

 

이 Component의 기본 기능만 알게 되면 리액트 기본은 끝났다고 말할 수 있으며, 기본적인 웹앱을 만들 수 있다.

이번 글에서 Component의 기본 기능을 개념과 예제를 통해 리액트의 기본을 끝내보자.

 

🛫props, state, event

Component에서 중요한 3가지 기본 기능들이다. 이 3가지 기능들을 쓰는 방법을 이해했다면 Component의 기본 기능을 끝냈다고 할 수 있으며, 리액트의 기본을 끝낼 수 있다.

우선 어떤 것인지 간단히 글로 알아보고 실제 예제를 통해서 이해하자.

 

👨🏿‍🤝‍👨🏼props, state 공통점과 차이점

공통점

공통점은 둘다 Component의 상태 정보를 가지고 있는 멤버 변수이며, 변경 시 render함수가 다시 호출된다.
렌더링이 다시된다는 의미로 값을 변경화면 화면에도 적용이 된다는 의미이다.
자신 Component뿐만 아니라 하위 Component까지 다시 갱신이 된다.

props

상위 Component가 하위 Component에게 전달하면 생성 되는 변수
props를 받은 Component에서는 props에 있는 값을 수정할 수 없다.

state

해당 Component가 직접 생성해서 사용하는 변수
수정이 가능하다.

 

📑예제 코드로 props와 state 이해

앞서 글로 props와 state를 알아봤는데, 예제 코드를 보며 빠르게 이해해보자

간단하게 위 구조와 같이 App Component에 Title과 Content라는 Component를 가지고 있는 구조를 예로 props와 state를 설명하겠다.

우선 바로 아래 코드는 props와 state를 이용하지 않는 코드이며, 이걸 props와 state를 사용하도록 수정해보겠다.

import { Component } from "react";

class Content extends Component {
	render() {
		return (
			<div> 이건 Content 입니다. </div>
		);
	}
}
class Title extends Component {
	render() {
		return (
			<div> 이건 Titile입니다. </div>
		);
	}
}
class App extends Component {
	render() {
		return (
			<div>
				<Title />
				<Content />
			</div>
		);
	}
}
export default App;

위 코드는 단순히 각 Component에서 텍스트를 출력하고 있는 코드이다.

이번에는 App Component에서 Title Component의 props에 텍스트를 전달하여 그 텍스트를 출력하도록 하고,

Content Component에서는 직접 state 변수로 텍스트를 출력하도록 수정 해보자.

import { Component } from "react";
 
class Content extends Component {
    constructor(props) {
        super(props);
        this.state = {
            example_state: "이건 Content의 state 텍스트 입니다."
        };
    }
 
    render() {
        return (
            <div>
                {this.state.example_state}
                <input type="button" value="test 버튼"
                    onClick={()=>{
                        this.setState({example_state:"변경된 state 텍스트 입니다."})
                    }}/>
            </div>
        );
    }
}
class Title extends Component {
    render() {
        return (
            <div> {this.props.text123} </div>
        );
    }
}
class App extends Component {
    render() {
        return (
            <div>
                <Title text123="App에서 Title로 전달하는 Text입니다."/>
                <Content example_props="App에서 Content로 전달하는 Text입니다."/>
            </div>
        );
    }
}
export default App;

🏹props 사용 방법

상위 Component에서는 아래와 같이 전달하고

하위 Component에서는 아래와 같이 전달받은 props를 사용하면 된다.

전달받은 props는 this.props에 추가가 되기에, this.props.이름으로 그냥 사용하면 된다.
위와 같이 div 태그 안에서 사용하려면 자바스크립 코드는 { } 로감싸줘야 한다.
props는 이렇게 사용방법이 간단하다. 끝이다. 3개 기본 기능 중에 1개를 끝냈다.
다음 state로 넘어가자.

🏹state 사용 방법

위 코드에서 test 버튼을 누르게 되면 아래와 같이 Content Component의 텍스트가 변경된 것 을 볼 수 있다.

선언
Component의 생성자 constructor에서 선언 및 초기화를 해줬다. 추가하고 싶은 state 변수가 더 있다면 example_state변수  , 뒤에 더 추가하면 된다.

사용
사용방법은 props와 마찬가지로 태그 안에서 사용하려면 자바스크립 코드는 { } 로 감싸서 사용하면 된다.

수정
state는 수정하려면 this.state.example_state='값' 이런 식으로 하면 안 되고,
꼭 setState 함수를 사용해야 한다.
setState 함수를 사용하지 않으면 렌더링이 되지 않는다.

 

📑예제 코드로 event 이해

3가지 기본 기능 중 이제 마지막 3번째 기능인 event이다.

props와 state를 이용해서 상위에서 하위 Component로 데이터를 전달했다. 그러면 하위에서 상위 Component로 데이터를 전달하려면 어떻게 해야 할까?

event를 이용하면 된다. 아래 예제는 하위 Component인 Title의 event를 통해 전달받은 데이터를 Content로 전달하는 예제이다.

import { Component } from "react";
 
class Content extends Component {
    render() {
        return (
            <div> {this.props.example_props} </div>
        );
    }
}
class Title extends Component {
    render() {
        return (
            <div> 
                이건 Title
                <input type="button" value="event 버튼"
                    onClick={()=>{
                        this.props.exampleEvent("Title에서 전달하는 Text");
                    }}/>
            </div>
        );
    }
}
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            example_state: "App에서 전달하는 Text"
        }
    }
    setAppText(text) {
        this.setState({
            example_state: text
        });
    }
    render() {
        return (
            <div>
                <Title exampleEvent={(text)=>{this.setAppText(text)}}/>
                <Content example_props={this.state.example_state}/>
            </div>
        );
    }
}
export default App;

event 버튼 눌렀을 때 결과

event 생성 및 발생
event는 this.props.이벤트이름(전달할 데이터) 으로 생성 및 발생시킬 수 있다.
아래 코드는 input 태그인 버튼(onClick)을 눌렀을 때 event가 발생하도록 했다.

데이터 수신
상위 Component에서는 하위 Component의 event가 발생했을 때 어떤 동작을 할지 정의해주면 된다.
App Component에서 exampleEvent가 발생 시 setAppText라는 함수를 호출하게 했으며, 같이 전달되는 text를 받아서 같이 넘겨줬다.

전체 그림
(1) event를 통해서 전달받은 text
(2) setAppText함수로 전달
(3) setState함수를 통해 Content로 state 값을 전달

 

React의 기본 기능에 대해서 알아봤다. 이제 이걸로 간단한 웹앱은 만들 수 있다.

아직은 익숙하지 않으니 이 3가지 기능들이 몸에 익힐 수 있도록 여러 가지 웹앱들을 만들어보자.

다음 글에서는 기본 기능을 이용해서 흔히들 만드는 Todo 앱을 후딱 만들어보자.