[React] React Component

Component

• React로 만들어진 앱을 이루는 최소한의 단위로 화면에 출력되는 요소
• 자바스크립트 함수와 유사하며, UI를 재사용 가능한 개별적인 단위로 나누어 활용
• 컴포넌트는 데이터를 다루며 그 결과로 UI를 렌더링
• 데이터(props)를 입력 받아, View(State) 상태에 따라 DOM 노트를 출력, React 엘리먼트를 반환
• 기존의 웹프레임워크는 MVC방식으로 분리하여 관리하여 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었으나 컴포넌트는 MVC의 View를 독립적으로 구성하여 재사용을 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 생성가능
• 컴포넌트는 자체 props를 수정하면 안됨

// [형식] 컴포넌트 생성
<컴포넌트 이름></컴포넌트 이름>

// [형식] 컴포넌트 출력
ReactDOM.render(컴포넌트, 컨테이너)

---

Component 종류

1. Function Component

• 컴포넌트 정의에 가장 간단한 사용방법은 Javascript 함수를 작성하는 것
• 클래스 컴포넌트에 비해 메모리 자원 절약
• State와 라이프 사이클 API 사용이 불가하나, v16.8이상부터 Hooks 기능이 도입되어 대체 가능
• 공식 api에서는 함수형 컴포넌트와 Hooks 사용을 권장

// 데이터를 가진 하나의 props 객체 인자를 받은 후 React 엘립먼트를 반환
function 컴포넌트명() {
	return <dv></div
}

 

2. Class Component

• ES6 클래스를 사용하여 컴포넌트 정의 
• state와 라이프 사이클  기능을  사용  할 수 있고, 임의 메서드 정의 가능
• render 함수가 반드시 있어야 하고, 그 안에서 보여줄 JSX를 반환해야 함
• component Import

class 컴포넌트명 extends React.Component {
	render() {
    	return <div></div>
    }
}

// [Component import 시 문법]
import { Component } from 'react'
class 컴포넌트명 extends Component {
	render() {
    	return <div></div>
    }
}

 

---

Component 작성 규칙

• 첫글자는 대문자로 시작 (React는 소문자로 시작하는 컴포넌트는 DOM 태그로 취급)
• 컴포넌트 생성 시 동사 단위로 나누어 주는게 좋다.

<div /> // HTML div 태그로 처리
<Welcome /> // 컴포넌트로 처리

---

Component 기본 사용방법

// [Exam]

	<div id="root"></div>
	<script type="text/babel">
		// 컴포넌트, 컨테이너 생성
		const component = <h1>리액트</h1>
		const container = document.getElementById('root')

		// 출력
		ReactDOM.render(component, container)

	</script>

컴포넌트 생성 순서

1. 컴포넌트 파일 생성
2. 코드 작성
3. 모듈 Import/Export (App.js)

---

Component의 props 사용

• 모든 컴포넌트 는 자신의 props를 다를 떄 반드시 순수함수처럼 동작하도록 해야 함

// 순수 함수 : 입력값을 바꾸려 하지 않고 항상 동일한 일력에 대한 동일한 출력 반환
function pureFunc(a,b){
	return a+b
}

// 입력값을 변경하는 함수는 수수 함수가 아님
function notPureFunc(a, b){
	a.total -=b
}

 

---

기본 형태

const 함수명= ()=> {
const 변수선언
  return (
    <>
	{* / HTML 표시 부분/ *}
    </>
  )
}

 

 

---

Component 렌더링

• 리액트 엘리먼트는 DOM 태그 이외에 사용자 정의 컴포넌틀 나타낼 수 있음
• 리액트가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 속성과 자식을 해당 컴포넌트에 단일 객체로 전달하는데 이 객체를 'props' 라고 함 

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

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element);

1. <Welcome name="Sara" /> 엘리먼트로 root.render()를 호출합니다.
2. React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출합니다.
3. Welcome 컴포넌트는 결과적으로 <h1>Hello, Sara</h1> 엘리먼트를 반환합니다.
4. React DOM은 <h1>Hello, Sara</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트합니다.

---

Component 합성

• 컴포넌트는 자신의 출력에 다른 컴포넌트 참조 가능한데 이는 모든 세부 단계에서 동일한 추상 컴포넌트를 사용할 수 있음을 의미
• 리액트 앱에서는 버튼, 폼, 다이얼로그, 화면등의 모든 것을 컴포넌트로 표현

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

// Welcome을 여러 번 렌더링하는 App 컴포넌트 생성 
function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

---

Component 추출

function formatDate(date) {
  return date.toLocaleDateString();
}

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
             src={props.author.avatarUrl}
             alt={props.author.name} />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

const comment = {
  date: new Date(),
  text: 'I hope you enjoy learning React!',
  author: {
    name: 'Hello Kitty',
    avatarUrl: 'http://placekitten.com/g/64/64'
  }
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Comment
    date={comment.date}
    text={comment.text}
    author={comment.author} />
);

Component 추출 Code 보기

Hello World in React

---

key 활용

• 리액트의 배열 렌더링 시 변화된 위치를 알기 위해 key가 필요
• map함수 활용 시 고유 인자가 없을 경우 인덱스를 활용

const ArrayDup = () => {
  const char = ['a', 'b', 'c'];
  const charList = char.map((c, index) => <li key={index}>{c}</li>);
  return <ul>{charList}</ul>;
};

export default ArrayDup;

Component Sources

• 기본 컴포넌트 생성 방식

// ----- [App.js]
const App = () => {
  return <Korean />;
};

const Korean = () => {
  return <h1>korean</h1>;
};
export default App;

• 구구단 계산

// ----- [App.js]

const App = () => {
  return (
    <>
      <MulFor />
      <MulMap />
      <MulMap2 />
    </>
  );
};

// for문을 활용한 구구단 계산
const MulFor = () => {
  const calc = () => {
    const result = [];
    for (let i = 2; i <= 9; i++) {
      result.push(<h2>{i}단</h2>);
      for (let j = 1; j <= 9; j++) {
        result.push(
          <p key={j}>
            {i} * {j} = {i * j}
          </p>
        );
      }
    }
    return result;
  };

  return calc();
};

// Map을 활용한 구구단
const MulMap = () => {
  const numChar = '23456789';
  const numList = [...numChar];
  return (
    <>
      {numList.map(function (dan) {
        return (
          <>
            <h2>{dan}</h2>
            {calc2(dan)}
          </>
        );
      })}
    </>
  );
};

const calc2 = (dan) => {
  const numChar = '123456789';
  const numList = [...numChar];
  return (
    <>
      {numList.map((num) => (
        <p>
          {dan} * {num} = {dan * num}
        </p>
      ))}
    </>
  );
};

// 중첨 Map 및 New Array 생성 사용
const MulMap2 = () => {
  const numList1 = [...new Array(8)].map((_, i) => i + 2);
  const numList2 = [...new Array(9)].map((_, i) => i + 1);

  return (
    <>
      {numList1.map(function (dan) {
        return (
          <>
            {numList2.map((num) => (
              <p>
                {dan} *{num} = {dan * num}
              </p>
            ))}
          </>
        );
      })}
    </>
  );
};
export default App;