3장 컴포넌트

ES6의 화살표 함수

• 화살표 함수(arrow function)는 ES6 문법에서 함수를 표현하는 새로운 방식
• 기존 방식을 아예 대체하진 않음
• 함수를 파라미터로 전달할 때 유용

setTimeout(function() 
    console.log('hello world');
}, 1000);    
);

--->

setTimeout(() => {
    console.log('hello world')
}), 1000);

• 이 문법이 기존 function을 대체할 수 없는 것은 용도가 다르기 때문
• 가르키고 있는 this 값이 다름

3.3 Props

• props는 properties를 줄인 표현.
• 컴포넌트 설정을 사용할 때 사용하는 요소
• props를 랜더링 할 때는 JSX 내부에서 { } 기호로 감싼다.
• 사용 방법

import React from 'react';

const MyComponent = (props) => {
  return <div>나으 새롭고 멋진 컴포넌트 내 이름은 {props.name}다</div>;
};

export default MyComponent;

• name이 지정 되지 않았을 때 기본 name 사용 방법

import React from 'react';
import MyComponent from './MyComponent';

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

MyComponent.defaultProps = {
  name: '기본이유',
};

6-21

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

• 컴포넌트 태그사이에 내용을 보여주는 props

const App = () => {
  return <MyComponent>랙트</MyComponent>; // MyComponent 태그사이에 작성한 랙트라는 문자열을 보여주려면  내부에서 보여주려면 props.children 값을 보여 주어야 한다.

};

 const MyComponent = (props) => {
   return (
     <div>
       나으 새롭고 멋진 컴포넌트 내 이름은 {props.name}다<br />
       children 값은 {props.children}
       입니다.
     </div>
   );
 };

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

• props 값을 조회할 때 props. 이라는 키워드를 붙이는데 이런 작업을 편하게 하기 위해 ES6의 비구조화 할당문법을 사용해 내부 값을 바로 추출하는 방법이 존재

const MyComponent = (props) => {
  const { name, children } = props;
  return (
    <div>
      안녕 내이름은 {name} 이고 <br />
      자식은 {children} 이야
    </div>
  );
};

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

export default MyComponent;

• 객체에서 값을 추추하는 문법 - 비구조화 할당 (destructuring assignment)
• 이 문법은 구조 분해 문법 이라고도 불리며, 함수의 파라미터 부분에서도 사용 가능.
• 만약 함수의 파라미터가 객체라면 그 값을 바로 비구조화 해서 사용하는 것

// 함수의 파라미터가 객체인 경우 바로 비구조화 해서 사용 
const MyComponent = ({ name, children }) => {
  return (
    <div>
      안녕하세요 제 이름은 {name} 입니다. <br />
      자식은 {children}
      입니다.
    </div>
  );
};

propTypes를 통한 props 검증

• 컴포넌트의 필수 props를 저장하거나 props의 타입(type)을 지정할 때는 propTypes 를 사용
• propTypes를 사용하려면 코드 상단에 import 구문을 사용하여 호출

import PropTypes from 'prop-types';


// export default MyComponent 위에 작성 

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

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

• 이렇게 설정하면 name 값은 무조건 문자열 형태로 전달 받아야 함
• name에 스트링 이외의 문자를 넣으면 개발자 도구 console 탭에 타입이 잘못 되었다고 알려줌 - 프로그램상 오류는 나지 않음

-------- 23 - 7 - 5 리액트 !!!!

3.3.6.1 Required를 사용하여 필수 propTypes 설정

• 경고 메시지를 띄워 주는 작업 -
  • isRequired를 붙여 준다
  • favoriteNumber라는 숫자를 필수 props로 지정

const App = () => {
  return (
    <MyComponent name="리액트" favoriteNumber={8}>
      여기가 자식?
    </MyComponent>

3.4.1 클래스형 컴포넌트의 state