REACT 4일차 (리액트 컴포넌트-1)

JSX는 JavaScriptXML의 줄임말로 자바스크립트 XML을 추가한 문법이다

JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성할 수 있어 편리하다.

 

src폴더의 App.js를 보면 return() 함수 내에 HTML을 사용하며

HTML이 아니라 XML 마크업 규칙을 따르므로 img 엘리먼트 끝에 />를 사용하는 등 차이가 있다.

 

----------------------------------------------------

컴포넌트와 구성요소

 

컴포넌트는 리액트의 꽃이라 불릴 정도로 리액트에서 가장 중요한 요소다.

리액트로 작성된 화면은 컴포넌트만으로 구성되어 있다.

 

기존의 웹 프레임워크는 MVC방식으로 정보 화면 구동코드를 분리하여 관리했다.

하지만 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용도 할 수 있고

새로운 컴포넌트도 쉽게 만들 수 있다.

 

컴포넌트 추가 후 화면으로 띄워보기

 

1. 컴포넌트 만들기

src 폴더에 새로운 폴더를 만등후 jsx파일 생성

(rcc입력 후 tab을 누르면 뼈대를 만들어줌, 컴포넌트의 첫 글자는 대문자)

 

2. APP 컴포넌트에 새로운 컴포넌트 추가 (App.js)

APP 컴포넌트에 마크업 형식으로 추가  <TodaysPlan />

ex) import TodaysPlan from './03/TodaysPlan'

 

<div className="body">

  <TodaysPlan />

</div>

 

----------------------------------------------------

컴포넌트에 데이터를 전달하는 프로퍼티

 

프로퍼티는 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용

프로퍼티 값은 수정할 수 없다는 특징이 있다.

 

프로퍼티 전달하는 법: MyComponent에 값을 전달하면

<MyComponent name="message" />

 

프로퍼티값 참조하는 법: MyComponent에서 값 받기

const name=this.props.name;

return <span>{name}</span>;

 

=> 프로퍼티는 상위 컴포넌트에서 하위 컴포넌트로 값을 전달한다.

     단방향으로 데이터가 흐른다.

 

프로퍼티는 자바스크립트의 자료형을 모두 사용할 수있다.

 

-문자열형 프로퍼티 사용하기

import PropTypes from 'prop-types' -> proptypes라이브러리 import

{this.props.name} -> name 프로퍼티로 받은 문자열 출력

PropsComponent.propTypes={propTypes라는 특수 변수를 사용하여 프로퍼티 자료형 정의

  name: PropTypes.string,}; ->프로퍼티의 자료형을 객체형으로 지정후 저장

 

 

-다양한 프로퍼티 사용하기

ChildComponent.jsx

render(){

  const{  => 프로퍼티에 전달된 값들을 render() 함수 내의 지역변수로 재정의

    boolValue,

    numValue,

    ~

} = this.props

return {

  <div>

    <span> 불리언 값: {boolValue}</span>

     ~

  </div>

);

Childcomponent.propTypes={ => 프로퍼티 자료형 정의

  boolValue: PropTypes.bool,

  numValue: PropTypes.number,

  ~

}

 

App.jsx

<ChildComponent

  boolvalue={true}

  numvalue={1}

  ~

  funcValue={() => { console.log('메시지');}}

/>

**문자열 외의 값은 중괄호로 감싸 전달해야 한다**

 

-필수 프로퍼티 사용

프로퍼티의 자료형을 정의할때 isRequired를 이용하면 된다.

필수 프로퍼티로 선언을 하고 값을 전달하지 않을 경우 console창에 warning이 뜬다.

ex) boolValue: PropTypes.bool.isRequired

 

 

-프로퍼티에 기본값 지정하기

Childcomponent.defaultProps = {

  boolValue: false,

};

 

-자식 프로퍼티 사용

JSX에서는 컴포넌트 하위에 배치한 노드를 하위 컴포넌트에서 프로퍼티로 접근할 수 있게 해준다.

 

TodaysPlan.jsx

return <div>{this.props.children}</div>;

TodaysPlan.propTypes = {

  children: PropTypes.node,

};

 

App.js

<TodaysPlan>

  <div>

    <span>자식 노드</span>

  </div>

</TodaysPlan>

 

이러면 this,props.children에  <div><span>자식 노드</span></div>가 들어간다.