[React] Component & props

Component

 

리액트의 문법으로 HTML을 한 단어로 줄여서 쓸 수 있는 방법

// Hello.js
import React from 'react';

function Hello() {
	return <div className="hello">Hello World!</div>
}

export default Hello;

// App.css
.hello {
	matgin-top: 20px;
    padding: 20px;
    background: #eee;
}

// App.js
import React from 'react';
import Hello from './Hello';

function App() {
	return (
    	<div>
        	<Hello />
        </div>
    );
}

export default App;

위의 코드는 App.js에서 함수를 길게 적을 게 아니라 src 폴더 안에 Hello.js를 만들어서 export default Hello (컨포넌트를 내보내겠다는 의미)로 다른 컴포넌트에서 불러올 수 있다.

하나의 HTML 태그만 있어야 하기에 <div></div>를 여러개 만드는 것은 불가능, 하나의 <div></div>에 묶으면 가능

 

반복출현하는 HTML, 자주 변경되는 HTML UI, 다른 페이지 만들 때 등을 Component로 만드는 게 효율적

상위 Component에서 만든 state 사용 하려면 props 문법을 사용

 

 

서로 가르키고 있는 this 값이 다르다.
function() { } : 종속된 객체를 this
() => { } : 종속된 인스턴스를 this, 바로 반환해야 하는 값에 사용하여 가독성 높이기

---

props

 

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

props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트(현 상황에서 App 컴포넌트)에서 설정 가능

 

MyComponent.js

App.js

defaultProps : 기본값 설정
props 값 설정 : <MyComponent name= "jaewpark" />; 하게 되면 값이 지정

 

• children

• 

  MyComponent.js

• 

  App.js

children : 컴포넌트 태그 사이의 내용을 보여줌
비구조화 할당 문법 : ES6 버전 이후에 생겨 좀 더 편하게 쓸 수 있다.

 

• propTypes
• props 타입을 지정해주기 위해 아래의 코드를 선언

import PropTypes from 'prop-types';

...

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

...

App.js

Console

• 출력은 제대로 되지만, 형태에 맞지 않았다면 console창에서 에러가 출력
• PropTypes.string.isRequired 유효성 검사를 통해 값이 안들어 오더라도 console창에서 확인 가능

---

MyComponent.js

App.js