SOAPLE 처음 만난 리액트 Components and Props

Components

자바스크립트의 함수와 유사한 로직으로, 입력을 받으면 출력을 리턴한다. (그래서 함수 같다고 생각하면 편하다고 한다)

 

입력 : Props

React Component

출력 : React element

 

component는 class, react element는 instance와 유사하다.

 

 

Props - Property (입력 속성)

React Component의 속성

컴포넌트에 전달할 정보를 담고 있는 자바스크립트 객체

 

 

 

---

Props 특징

Read only 라서 값을 변경할 수 없다

---> 새로운 값을 컴포넌트에 전달하여 새로운 element를 생성해준다.

 

 

pure 한 함수 : 입력값을 변경하지 않고 같은 입력값에 대해 항상 같은 출력값을 리턴할 때

Impure 함수 : 입력값을 변경

 

모든 리액트 컴포넌트는 Props에 관해선 pure 함수 같은 역할을 해야한다

즉, 모든 리액트 컴포넌트는 Props를 변경할 수 없고 같은 Props에 대해선 같은 결과를 보여줘야 한다는 것이다!

 

 

Props 사용법

// JSX 사용
function App(props) {
	return (
    	<Profile
        	name = "길동"
            introduction = "안녕!"
            viewCount = {1500}
        />
    );
}


/// props 의 형태는 객체!
{
	name : '길동',
    introduction : '안녕!',
    viewCount : 1500
}

// JSX 미사용
React.createElement (
	Profile,
    {
    	name : '길동',
        introduction : '안녕!',
        viewCount : 1500
    },
    null
);

위 코드를 분석하자면,

1. App 컴포넌트 안

2. Profile 컴포넌트를 사용

3. Profile 컴포넌트의 안에 name, introduction, viewCount 의 세가지 props가 존재

4. props를 JSX로 사용하고자 한다면 문자열을 제외한 다른 자료형은 { } 를 사용하여 감싸주어야 한다 (문자열도 { } 가능, 컴포넌트도 넣어줄 수 있다)

 

 

---

Component 만들기

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

const el = <div/>; // HTML div 태그로 인식
const el2 = <Welcome name='길동' />; //Welcome이라는 리액트 component로 인식

 

1. class Component

상속 extends React.Component 을 해줘서 리액트 컴포넌트로 구현

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

 

2. function Component  --> Hook ?

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

 

 

---

Component 렌더링

const el = <div/>; // HTML div 태그로 인식 -> DOM태그를 사용한 element

const el2 = <Welcome name='길동' />; //Welcome이라는 리액트 component로 인식 -> 사용자가 정의한 Component를 사용한 element

 

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

// Welcome 함수 컴포넌트를 사용하여 element를 생성
// 이때, 입력을 담당하는 props는 name에 적어준 내용이 들어가진다.
const el = <Welcome name='길동'/>;

// 리액트 돔(가상 돔)에 해당 요소를 #root에 붙여준다
ReactDOM.render(
	el,
    document.getElementById('root');
);

 

 

 

---

Component의 합성

복잡한 화면을 여러 컴포넌트를 합쳐서 만들 수 있다!

 

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

function App(props) {
	return (
    <div>
    	<Welcome name = '길동' />
        <Welcome name = '이지' />
        <Welcome name = '순신' />
    </div>
    )
}

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

 

Component의 추출

큰 컴포넌트를 산산조각 내줄 수 있다, 재사용성 ⬆, 개발 속도 ⬆️

기능 단위로 나눠줄 수 있으면 나눠준다면 재사용이 가능한 component를 많이 가질 수 있어 개발 속도가 빨라진다

 

 

 

import React from "react";

const styles = {
  wrapper : {
    margin : 8,
    padding : 8,
    display : 'flex',
    flexDirection : 'row',
    border : '1px solid gray',
    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,
  },
};

function Comment(props) {
  return (
    <div style={styles.wrapper}>
      <div style={styles.imageContainer}>
        <img src="" style={styles.image} alt="" />
      </div>
      <div style={styles.contentContainer}>
        <span style={styles.nameText}>{props.name}</span>
        <span style={styles.commentText}>
          <h1>{props.comment}</h1>
        </span>
      </div>
    </div>
  );
}

export default Comment;

 

import React from "react";
import Comment from "./Comment";

const comments = [
  {
    name : '길동',
    comment : '안녕~',
  },
  {
    name : '순신',
    comment : '안녕하세요.',
  },
  {
    name : '이지',
    comment : 'Hello~~',
  },
];

function CommentList(props) {
  return (
    <div>
      {/* <Comment name='길동' comment='안녕~'/>
      <Comment name='순신' comment='안녕하세요.'/> */}
      {comments.map(comment => {
        return (
          <Comment name={comment.name} comment={comment.comment} />
        );
      })}
    </div>
  );
}

export default CommentList;

 

import CommentList from './chapter05/CommentList';
ReactDOM.render(
  <React.StrictMode>
    <CommentList />
  </React.StrictMode>,
  document.getElementById('root')
);