🔮 React - 3. 컴포넌트(Component)

컴포넌트?

• UI를 구성하는 독립적인 모듈 입니다.
• 재사용이 가능하며, 각 컴포넌트는 자체적인 UI와 상태(state)를 가집니다.
• props와 state를 가집니다.
• 대문자로 시작하고, return문에는 UI요소를 작성합니다.
  (React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리 함)

props : 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터
state : 컴포넌트 자체에서 관리하는 데이터, state가 변경되면 컴포넌트는 다시 렌더링 됨.(⭐️hook)

컴포넌트는 함수형 컴포넌트와 클래스 컴포넌트로 나눌 수 있습니다.

 

함수형 컴포넌트는 함수를 사용하여 UI를 구성하는 컴포넌트입니다.

클래스형 컴포넌트보다 간단하게 작성할 수 있으며, 최근에는 함수형 컴포넌트를 사용하는 것이 추세입니다.

 

그럼 함수형 컴포넌트에 대해서 더 자세히 알아볼까요?

함수형 컴포넌트

• props를 받아와 UI를 렌더링하는 역할을 수행합니다.
• 함수형 컴포넌트는 함수를 반환하므로, 컴포넌트의 구조를 보다 명확하게 파악할 수 있습니다.

props

props?
🔎 property와 value를 받는 덩어리 객체
👉 property(속성)의 줄임말로 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터를 의미합니다.
    예를 들어, 부모 컴포넌트에서 자식 컴포넌트에게 이름, 나이, 이메일 등의 데이터를 전달할 수 있습니다.
👉 props는 불변성을 가지므로, props를 변경할 수 없습니다.
👉 변수를 선언하면 객체 리터럴로 만들어져서 알아서 받음..(?

기본 예제

🔷 WelcomeProp 컴포넌트는 props라는 객체를 인자로 받아서, name 속성을 출력합니다.

🔷 App 컴포넌트에서는 name 속성에 React 값을 전달하여, WelcomeProp 컴포넌트를 호출합니다.

import './App.css';

// 매개변수에 들어가는 props는 하나의 객체..(?)
function WelcomeProps(props) { // 컴포넌트
  return <h1>Hello, {props.name} {props.age}살</h1>
}

function App() {
  const element = <WelcomeProps name="곰돌이사육사" age="10" /> // 자동으로 'props' 객체 리터럴이 생성되어 전달됨.

  return (
    <>
    <div>{element}</div>
    </>
  );
}

export default App;

import './App.css';

// 매개변수에 들어가는 props는 하나의 객체..(?)
// 컴포넌트는 항상 대문자로 시작하고, 반환값은 UI 요소
function WelcomeProps(props) { // 컴포넌트
  return <h1>{props.name} : {props.age}살</h1>
}

function App() {
// 자동으로 'props' 객체 리터럴이 생성되어 전달됨.
  return (
    <>
      <WelcomeProps name="홍길동" age="18" />
      <WelcomeProps name="한석봉" age="22" />
    </>
  );
}

export default App;

재사용

import './App.css';

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

function App() {
  return (
      <div>
        <WelcomeProp name="안유진" />
        <WelcomeProp name="유나" />
        <WelcomeProp name="미미" />
      </div>
  );
}

export default App;

컴포넌트 합성

• 여러 개의 컴포넌트를 조합하여 하나의 컴포넌트를 만드는 것 입니다.
  📌 마치, 레고블럭을 조립하는 것 처럼...
  이렇게 하면 컴포넌트의 재사용성과 추상화를 높일 수 있습니다.
• React 앱에서는 버튼, 폼, 다이얼로그, 화면 등 모든 것들이 컴포넌트로 표현됩니다.

// 리액트를 사용하기 위해 필요한 모듈을 불러오는 코드
import React from "react";

function Heading(props) {
  return <h1>{props.text}</h1>;
}

function Paragraph(props) {
  return <p>{props.text}</p>;
}

function Section(props) {
  return (
    <>
      <Heading text={props.title} />
      <Paragraph text={props.content} />
    </>
  );
}

export default Section;

import './App.css';
import Section from "./0411_1_컴포넌트합성";

function App() {

  return  (
    <>
      <Section title="오늘의 날씨" content="오늘은 흐리고 돌풍이 예상 됩니다." />
      <Section title="오늘의 스포츠" content="손흥민 EPL 100골 돌파" />
    </>
  );
}

export default App;

기본값 설정 : defaultProps

• props 값을 따로 지정하지 않는 경우, 화면을 보여줄 기본값을 설정합니다.

const MyComponent = props => {
    return <div>안녕하세요. 제 이름은 {props.name} 입니다.</div>;
}

MyComponent.defaultProps = {
    name: "기본 이름"
};

export default MyComponent;

태그 사이의 내용을 보여주는 children

• children : 리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여주는 props

const MyComponent = (props) => {
  return (
    <div>
      안녕하세요. 제 이름은 {props.name} 입니다.<br />
      children 값은 {props.children) 입니다.
    </div>
  );
}

import './App.css';

import Mycomponent from './0411_2_MyComponent';

function App() {
  let insideTag = "운동";
  
  return (
    <MyComponent name="홍길동">{insideTag}</Mycomponent>
  );
}

export default App;

구조분해(비구조화할당)를 통해 props 내부 값 추출

• 배열이나 객체의 속성 혹은 값을 해체하여 그 값을 변수에 담아 표현하는 자바스크립트 표현식
• ⭐️ 매개변수라면 () 안에 담겠지만 객체를 해체해서 담는 것이기 때문에 반드시 중괄호{}에 담아야 함.

const MyComponent = ({name, children}) => {
	return (
      <div>
        안녕하세요. 제 이름은 {name} 입니다.<br />
        children 값은 {children} 입니다.
      </div>
  );
}

전개 연산자

import React from "react";

const Person = ({name, age, gender}) => {
  return (
    <>
      <p>Name : {name}</p>
      <p>Age : {age}</p>
      <p>Gender : {gender}</p>
    </>
  );
}

export default Person;

import './App.css';
import Person from './0411_3_Person_전개연산자';

// 화살표 함수 : const App = () => {}
function App() {
  const personData = {
    name : "홍길동",
    age : 20,
    gender : "남성"
  }

  return (
    <>
      <Person {...personData}/>
    </>
  );
}

export default App;

컴포넌트 추출

🔮 추후 추가 예정