React 공부하기 3. 컴포넌트

모든 리액트에 대한 정보는 공식 문서와 "소플의 처음 만난 리액트"를 공부하고 작성한 내용입니다.

---

 

프론트엔드 개발자라면 꼭 필요한 React

 

 

리액트 컴포넌트은 개념적으로 자바스크립트의 함수와 비슷하다.

함수가 입력을 받아서 출력을 내뱉는 것처럼, 리액트 컴포넌트도 입력을 받아서 정해진 출력을 내뱉는다.

 

리액트 컴포넌트 = 그냥 하나의 함수

 

컴포넌트 만들기

1. 함수형 컴포넌트

function Welcome(props) {
	return <h1>안녕, {props.name}</h1>;
 }

• 하나의 props를 받아서 리액트 엘리먼트를 리턴 = 함수 컴포넌트

 

2. 클래스 컴포넌트

class Welcome extends React.Component {
 	render() {
  		return <h1>안녕, {this.props.name}</h1>;
    }
}

• 함수 컴포넌트와의 차이점 : 리액트의 모든 클래스 컴포넌트는 React.Component를 상속 받아서 만듦
• 이는 React.Component를 상속받았기 때문에 결과적으로 리액트 컴포넌트가 되는 것

 

3. 컴포넌트 이름 짓기

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

Because, 리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 인식하기 때문

// HTML div 태그로 인식
const element = <div />;

// Welcome이라는 리액트 컴포넌트로 인식
const element = <Welcome name="안녕" />;

 

4. 컴포넌트 렌더링

// DOM 태그를 사용한 element
const element = <div />;

// 사용자가 정의한 컴포넌트를 사용한 element
const element = <Welcome name="안녕" />;

위의 두 줄의 코드는 모두 리액트 엘리멘트를 생성

다음 코드는 엘리멘트를 렌더링 하는 코드이다.

 

function Welcome(props) {
	return <h1>안녕, {props.name}</h1>;
}

const element = <Welcome name="안녕" />;
ReactDOM.render(
	element,
    document.getElementById=('root')
 );

• <Welcome name = "안녕" />이라는 값을 가진 엘리먼트를 파라미터로 해서 ReactDOM.render()를 호출
• 이후 리액트는 Welcome 컴포넌트에 { name: "안녕" }이라는 props를 넣어서 호출하고 그 결과로 리액트 엘리먼트가 생성.

 

컴포넌트 합성

여러 개의 컴포넌트를 합쳐서 하나의 컴포넌트를 만드는 것

function Welcome(props) {
	return <h1>Hello, {props.name}</h1>;
}

function App(props) {
	return (
    	<div>
        	<Welcome name="Mike" />
            <Welcome name="Steve" />
            <Welcome name="Jane" />
        </div>
    )
}

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

 

컴포넌트 추출

큰 컴포넌트에서 일부를 추출해서 새로운 컴포넌트를 만드는 과정

function Component(props) {
	return (
    	<div className="comment">
        	<div className="user-info">
                <img className="avatar"
                    src="{props.author.avatarUrl}"
                    alt="{props.author.name}"
                />
                <div className="user-info-name">
                    {props.author.name}
                </div>
            </div>

            <div className="comment-text">
                {props.text}
            </div>

            <div className="comment-date">
                {formatDate(props.date)}
            </div>
        </div>
    );
}

• Comment 컴포넌트에서는 <img> 태그를 사용하여 사용자의 프로필 이미지를 표시
• 이 부분을 추출해서 Avatar라는 별도의 컴포넌트 제작

 

function Avatar(props) {
    return (
        <img className="avatar" 
            src="{props.user.avatarUrl}" 
            alt="{props.user.name}" 
        />
    );
}

• user라는 보편적인 단어를 사용하는 것은 재사용성 측면을 고려하는 것
• 다른 곳에서 이 컴포넌트를 사용할 때도 props에 들어갈 속성들이 의미상 큰 차이 없이 사용할 수 있게 하기 위함

 

function Component(props) {
	return (
    	<div className="comment">
        	<div className="user-info">
                <Avatar user={props.author} />
                <div className="user-info-name">
                    {props.author.name}
                </div>
            </div>

            <div className="comment-text">
                {props.text}
            </div>

            <div className="comment-date">
                {formatDate(props.date)}
            </div>
        </div>
    );
}

 

UserInfo 컴포넌트 추출

function UserInfo(props) {
    return (
        <div className="user-info">
            <Avatar user={props.user} />
            <div className="user-info-name">
                {props.user.name}
            </div>
        </div>
    );
}

• props에 author 대신 좀 더 보편적인 좀 더 보편적인 의미를 갖고 있는 user를 사용

 

function Component(props) {
	return (
    	<div className="comment">
            <UserInfo user={props.author} />
            <div className="comment-text">
                {props.text}
            </div>
            <div className="comment-date">
                {formatDate(props.date)}
            </div>
        </div>
    );
}

• Comment 컴포넌트가 UserInfo 컴포넌트를 포함하고 있고, UserInfo 컴포넌ㅌ가 Avatar 컴포넌트를 포함하고 있는 구조
• 이외에도 추가적으로 Comment의 글과 작성일이 나오는 부분도 별도의 컴포넌트로 추출이 가능