4. 컴포넌트와 Props

컴포넌트란

리액트는 컴포넌트 기반의 구조라는 특징을 알아 보았는데 여기서 컴포넌트가 무엇인지 살펴보면 다음과 같다.

자바스크립트 함수 - (입력 -> 처리 -> 출력)

리액트 컴포넌트 -(입력 -> 처리 -> 출력) 

과 같이 자바스크립트의 함수와 같은 유형으로 처리가 된다. 따라서 리액트 컴포넌트를 그냥 함수라고 이해하면 좀 더 쉽게 이해 할 수 있다.

하지만 여기서 자바스크립트 함수와 다른 부분이 있는데~

자바스크립트 함수는 입력이 매개변수인데 반해 리액트의 입력은 Props 이다.

또한 출력 결과가 리액트의 출력은 리액트 엘리먼트이다.

즉 '어떤한 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성해서 리턴해 주는것' 이다.

 

Props란

Props는 prop가 여러개인 것을 의미한다.

여기서 prop는 property 의 약자이다.

즉 여러개의 property를 의미하며 컴포넌트의 입력은 여러개의 property로 입력이 된다는 것을 의미한다.

 

특징

모든 리액트 컴포넌트는 Props를 직접 바꿀 수 없고, 같은 Props에 대해서는 항상 같은 결과를 보여준다.

 

사용법

const styles = {
    wrapper: {
        margin: 8,
        padding: 8,
        display: "flex",
        flexDirection: "row",
        border: "1px solid grey",
        borderRadius: 16,
    },
    imageContainer: {},
    image: {
        width: 50,
        height: 50,
        borderRadius: 25,
    },
    contentContainer: {
        marginLeft: 8,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
    },
    nameText: {
        color: "black",
        fontSize: 16,
        fontWeight: "bold",
    },
    commentText: {
        color: "black",
        fontSize: 16,
    },
};

const comments = [
    {
        name: "홍길동",
        comment: "안녕하세요",
    },
    {
        name: "이순신",
        comment: "리액트 테스트중입니다.",
    },
    {
        name: "유관순",
        comment: "리액트 재미 있어요.",
    },
];

function Comment(props) {
    return (
        <div style={styles.wrapper}>
            <div style={styles.imageContainer}>
                <img
                    src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"
                    style={styles.image}
                />
            </div>

            <div style={styles.contentContainer}>
                <span style={styles.nameText}>{props.name}</span>
                <span style={styles.commentText}>{props.comment}</span>
            </div>
        </div>
    );
}

function CommentList(props) {
    return (
        <div>
            {comments.map((comment) => {
                return (
                    <Comment name={comment.name} comment={comment.comment} />
                );
            })}
        </div>
    );
}

ReactDOM.render(
	<CommentList />,
	document.getElementById('root')
)

위와 같이 댓글을 다는 형태에서 CommentList 에서 Comment 를 호출 할때 proerty 에 name과 comment 에 값을 전달 하고 Comment 에서 해당 프로퍼티를 이용해서 엘리먼트를 출력 한다.

여기서 전달 하는 데이터는 Key=Value 와 같은 형태의 쌍으로 전달하게 된다.

 

컴포넌트 만들기

컴포넌트는 함수컴포넌트와 클래스컴포넌트로 나뉜다.

초기에는 클래스컴포넌트를 많이 사용하였지만 현재는 함수컴포넌트를 개선해서 훅(Hook)을 주로 사용한다.

훅(Hook)에 대해서는 다시 알아 보도록 하고 여기서는 함수컴포넌트와 클래스컴포넌트를 알아 본다.

 

함수컴포넌트 VS 클래스컴포넌트

컴포넌트는 순수한 함수와 같은 역할을 수행한다.

class Hello extends React.Component{
	render(){
		return <div> Hello {this.props.toWhat}</div>
	}
}
ReactDOM.render(
	<Hello toWhat="World" />,
	document.getElementById('root')
)

JSX 파일에서 살펴 보았던 위의 예제를 살펴 보자.

위의 예제는 클래스 형태의 Hello 컴포넌트이다.

이것을 함수형 형태의 컴포넌트로 변경해 보면 다음과 같다.

function Hello(props){	
		return <div> Hello {props.toWhat}</div>
}
ReactDOM.render(
	<Hello toWhat="World" />,
	document.getElementById('root')
)

클래스 컴포넌트는 React.Component 를 상속 받아서 Hello 라는 클래스를 만들었기 때문에 결과적으로 리액트 컴포넌트가 된다.

 

컴포넌트 이름짓기

컴포넌트의 이름은 항상 대문자로 시작해야 된다.

리액트는 소문자로 시작하면 DOM의 태그로 인식하기 때문이다.

 

 

컴포넌트 합성

여러개의 컴포넌트를 합쳐서 하나의 컴포넌트를 만드는 방법에 대해 알아 보자.

function Hello(props){	
		return <div> Hello {props.toWhat}</div>
}
function App(props){
	return (
		<div>
			<Hello toWhat="World1" />
			<Hello toWhat="World2" />
			<Hello toWhat="World3" />
		</div>		
	)		
	
}
ReactDOM.render(
	<App />,
	document.getElementById('root')
)

위의 예에서 App 에서 Hello 를 여러번 사용하는 것을 볼 수 있다.

 

이렇게 여러개의 컴포넌트를 합쳐서 또 다른 컴포넌트를 만드는 것을 합성컴포넌트라고 한다.

 

컴포넌트 추출

컴포넌트 합성과 반대로 복잡한 컴포넌트를 쪼개서 여러개의 컴포넌트로 나누는 것을 컴포넌트 추출(Extracting Component) 라고 한다.

즉 큰 컴포넌트의 일부를 추출해서 새로운 컴포넌트를 만드는 것이다.

 

사용법에서 만들었던 다음 함수를 이용해서 살펴 보자.

function Comment(props) {
    return (
        <div style={styles.wrapper}>
            <div style={styles.imageContainer}>
                <img
                    src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"
                    style={styles.image}
                />
            </div>

            <div style={styles.contentContainer}>
                <span style={styles.nameText}>{props.name}</span>
                <span style={styles.commentText}>{props.comment}</span>
            </div>
        </div>
    );
}

여기서 아바타를 나타내는 img 부분을 Avatar 라는 별도의 컴포넌트로 만들어 보자.

function Avatar(props){
	return(
		<img
			src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"
			style={styles.image}
		/>
	)
}

추출된 Avatar는 위와 같은 형태가 될 것이다.

 

이렇게 추출된 Avata를 원래 컴포넌트에 반영해 보자.

function Comment(props) {
    return (
        <div style={styles.wrapper}>
            <Avatar />

            <div style={styles.contentContainer}>
                <span style={styles.nameText}>{props.name}</span>
                <span style={styles.commentText}>{props.comment}</span>
            </div>
        </div>
    );
}

추출된 Avatar 를 적용한 모습이다.

이렇게 하면 가독성이 높아진다.

 

 

참고

소플의 처음 만난 리액트