컴포넌트와 Props

⚡컴포넌트의 역할

 

1. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어줌

2. 라이프사이클 API를 이용하여 컴포넌트가 화면에서 나타날 때 사라질 때 변화가 일어날 때 주어진 작업들을 처리할 수 있음

3. 임의 메서드를 만들어 특별한 기능을 붙여줄 수 있음

 

 

---

 

 

🔍클래스형 컴포넌트

 

import "./App.css";
import { Component, Fragment } from "react";

class App extends Component {
  render() {
    const name = "react";
    return <div className="react">{name}</div>;
  }
}

export default App;

 

이런 식으로 컴포넌트가 이루어져있습니다.

 

😎함수 컴포넌트와 클래스형 컴포넌트의 차이?

클래스형 컴포넌트는 state기능 , 라이프 사이클 기능을 사용할 수 있습니다.

리액트 공식 매뉴얼에서는 함수 컴포넌트와 Hooks를 사용하는것을 권장한다고 하지만

클래스형 컴포넌트의 기능도 알아두는게 좋다고하네용..

 

---

 

🔍함수형 컴포넌트

import "./App.css";
import { Fragment } from "react";

function App() {
  const name = "리액트";
  const style = {
    backgroundColor: "black",
    color: "aqua",
    fontSize: "48px",
    fontWeight: "bold",
  };

  return <>{/* 주석은 이렇게*/}</>;
}

export default App;

 

함수처럼 작성하는 것을 말하나보네요

😉함수 컴포넌트의 장점

1. 클래스 형에 비해 선언하기 편하다
2. 클래스 형에 비해 메모리 자원 소비가 적다

😑함수 컴포넌트의 단점

1. state 사용이 불가하다
2. 라이프사이클 API의 사용이 불가하다

** Hooks라는 기능이 도입되면서 단점이 어느정도 해결되었음

 

---

🔍컴포넌트 생성

파일 만들기

코드 작성하기

모듈 내보내기 및 불러오기

 

첫 컴포넌트를 만들어보겠읍니다

이를 위해 src 디렉토리에 js파일을 생성합니다.

저는 MyComponent라는 이름의 js파일을 생성할게용

 

MyComponent.js 

const myComponent = () => {
    return <div>나의 새롭고 멋진 컴포넌트</div>
}

export default myComponent

export를 통해 모듈을 내보내줍니다.

그다음 App.js로 돌아와서

 

App.js

import MyComponent from './MyComponent';

const App = () => {
  return <MyComponent/>
};

export default App;

import 구문을 이용해 MyComponent 컴포넌트를 불러온 뒤

MyComponent를 리턴하면

렌더링이 정상적으로 되고있네용

---

🔍Props

props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소입니다.

props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있습니다.

 

JSX 내부에서 props 렌더링

 

myComponent.js

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

export default myComponent

 

App.js

import MyComponent from './MyComponent';

const App = () => {
  return <MyComponent name = "React"/>
};

export default App;

 

출력결과

안녕하세요 제 이름은 React입니다.

 

지금 당장 인식으로는 props는 매개변수같은것처럼 느껴지네요

근데 만약에 Props를 부모컴포넌트로부터 전달받지 않았을때

기본적으로 표시하고 싶은 값이 있다면?

---

🔍Props 기본값 설정 : defaultProps

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


myComponent.defaultProps = {
    name : '기본 이름'
}

export default myComponent

.defaultProps를 이용해서

기본 props를 설정해줄 수 있는거군용

---

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

 

App.js

import MyComponent from "./MyComponent";

const App = () => {
  return <MyComponent> 리액트 </MyComponent>;
};

export default App;

MyComponent.js

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

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

export default myComponent;

이렇게 코드를 작성하면 어떤 실행결과가 나올까요?

 

안녕하세요 제 이름은 기본 이름입니다.
children 값은 리액트 입니다.

 

children은 컴포넌트 태그 사이의 내용을 보여주는군용

 

---

🔍비구조화 할당 문법을 통해 props 내부 값 추출하기

props 값을 조회할 때마다 props. 키워드를 앞에 붙여주는 것을

비구조화 할당 문법을 통해 props. 없이 바로 내부 값을 추출하는 형태로

코드를 작성하는 것도 가능합니다.

 

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

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

export default myComponent;

잘은 모르겠지만 props는 

부모컴포넌트가 인자로 넘겨준 것들을 차례로 받고

props의 마지막 부분에 children에 대한 인자가 담겨있는것 같네용

 

아니면...말구요..

 

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

이렇게 함수의 파라미터가 객체라면

그 값을 바로 비구조화해서 사용하는 것도 가능합니다.

 

---

🔍propsTypes를 통한 props 검증

컴포넌트의 필수 props를 지정하거나

props의 타입을 지정할 때는 propsTypes를 이용합니다.

defaultProps 설정과 비슷한데

다른점은 우선 propTypes를 import 구문을 통해 불러와야합니다.

 

import PropTypes from "prop-types";

이렇게 불러올 수 있습니다.

myComponent.propTypes = {
  name: PropTypes.string,
};

이런식으로 작성하면

지정한 타입이 아닌 매개변수가 들어오면

경고 메시지가 출력됩니다.

🔍isRequired를 사용하여 필수 propTypes 설정

myComponent.propTypes = {
  name: PropTypes.string.isRequired
};

뒤에 isRequired만 붙여주면 되네요

isRequired가 붙으면 에러가 살벌하게 나는군요