16.8 이후 hook 기반의 컴포넌트 정리

1. 컴포넌트101
임광규
2020.ReactJS 1

2. TODOComponent구조
TODO보기
2020.ReactJS 2

3. 2020.ReactJS 3

4. 함수컴포넌트
함수를이용하여컴포넌트생성
import React from "react";
import "./styles.css";
export default function App(props) {
return (
<h1>Hello, {props.name || "New"}</h1>
);
}
2020.ReactJS 4

5. 클래스컴포넌트
클래스를이용하여컴포넌트생성
import * as React from "react";
import "./styles.css";
export default class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name || "New"}</h1>;
}
}
2020.ReactJS 5

6. 함수컴포넌트VS클래스컴포넌트
리액트공식매뉴얼에서는함수컴포넌트와Hooks를사용하도록권장
함수형컴포넌트장점
클래스컴포넌트보다선언이쉽다.
메모리자원도클래스컴포넌트보다덜사용한다.
결과물의파일크기가더작다.
함수형컴포넌트단점들
state와라이프사이클API사용이불가능
Hooks 기능이도입되면서대부분해결됨
2020.ReactJS 6

7. 화살표함수
function 키워드를사용하는대신에 () => {} 를사용하여함수생성
ES6에도입된화살표함수문법
화살표함수의특징
화살표함수는오직익명함수이다.==>표현식만사용가능
화살표함수는상위환경의this를계승받는다.
2020.ReactJS 7

8. 모듈내보내기(export)불러오기(import)
내보내기
export default MyComponent;
불러오기
import MyComponent from './MyComponent';
2020.ReactJS 8

9. props
props 는properties를줄인표현으로컴포넌트 속성 을설정할때사용하는요소
props값은해당컴포는트를불러와사용하는 부모 컴포넌트 에서설정
props사용
export default (props) => <div>{props.name}</div>
props설정
import MyComponent from './MyComponent';
export default () => <Mycomponent name="K" />
2020.ReactJS 9

10. defaultProps
props의 기본값 을설정하는방법
import React from 'react'
const MyComponent = (props) => <div>{props.name}</div>
MyComponent.defaultProps = {
name: '기본 이름'
}
export default MyComponent;
2020.ReactJS 10

11. children
컴포넌트 태그 사이의 내용 을보여주는props
import MyComponent from './MyComponent';
export default () => <Mycomponent name="K" >동감</MyComponent>
import React from 'react'
const MyComponent = (props) => (<div>
이름은 {props.name}<br />
children은 {props.children}
</div>);
export default MyComponent;
2020.ReactJS 11

12. 비구조화할당을통한props내부값추출
import React from 'react'
const MyComponent = ({name, children}) => (<div>
이름은 {name}<br />
children은 {children}
</div>);
export default MyComponent;
2020.ReactJS 12

13. propTypes를통한props검증
값의타입,필수여부등을확인후경고
더욱자세한내용참조
import React from 'react'
const MyComponent = ({name, children}) => (<div>
이름은 {name}<br />
children은 {children}
</div>);
MyComponent.defaultProps = {
name: "기본이름"
};
MyComponent.prototype = {
// name: PropTypes.string, // 타입만 선언 하는 경우
name: PropTypes.string.isRequired, // 타입 선언 + 필수 처리
};
export default MyComponent;
2020.ReactJS 13

14. state
state는컴포넌트내부에서바뀔수있는값을의미
props는컴포넌트가사용되는과정에서부모컴포넌트가설정하는값이며props를바꾸려면부
모컴포넌트에서바꾸어주어야함
import React from 'react';
export default (props) => {
const [name, setName] = React.useState('K');
return (<div>
{name} <br />
<button onClick={() => setName('L')} >변경</button>
</div>);
}
2020.ReactJS 14

15. state를사용시주의점
.useState를통해전달받은 setter 함수를사용해야한다
// 잘못된 사용법
const [name, setName] = React.useState({ a: "K" });
name.a = "C";
.배열이나객체를업데이트할때사본을만들고사본값에업데이트후 setter 를통해변경한다.
const obj = {a:1, b:2, c:3};
const newObj = {...obj, b:4}; // 사본을 만들고 b 값만 변경 처리
2020.ReactJS 15

16. propsVSstate
props 와 state 는둘다컴포넌트에서사용하거나랜더링할데이터를담고있으나역활이다르다.
props는 부모 컴포넌트가 설정
state는 컴포넌트가 자체적으로 지닌 값으로 내부에서 업데이트
2020.ReactJS 16

17. 뽀나스
CentOS7에서Heroku연동하여Node.js서버기동해보기
Express에서ReactJS소스코드구동
2020.ReactJS 17

18. 참고자료
[자바스크립트]arrowfunction과this
2020.ReactJS 18