<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
//함수로 컴포넌트 만들기
function ComponentFunction(props) {
return (
<div>
<h1>{props.message} this.props.message 이것은 함수로 만든 컴포넌트 입니다.</h1>
</div>
);
}
//클라스로 컴포넌트 만들기
Component.defaultProps = {
message: '디폴트!!!',//뒤에 나오는 static defaultProps = {message: '디폴트!!!',};와 동일
};
class ComponentClass extends React.Component {
//static defaultProps = {message: '안녕하세요!!!',};
render() {
return (
<div>
<h1>
{this.props.message} 이것은 클래스를 상속하여 만든 컴포넌트
입니다.
</h1>
</div>
);
}
}
ReactDOM.render(
<Component message="안녕하세요!!!" />,
document.querySelector('#root'),
);
</script>
</body>
</html>
Props
Props 는 컴포넌트 외부에서 컴포넌트에게 주는 데이터이다.
props는 속성을 나타내는 데이터로 React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 전달하는 단일 객체이다. 함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안된다.
State
State 는 컴포넌트 내부에서 변경할 수 있는 데이터이다.
컴포넌트 안에서 state= {};처럼 객체 형태로 존재 해야 한다.
Props 와 State 둘 다 변경이 발생하면, Render가 다시 일어날 수 있다.
class Component extends React.Component {
//스테이트 생성법 1
constructor(props) {
super(props);
this.state = {s: '스테이트'};
}
//스테이트 생성법 2
state = {
s: '스테이트',
count: 0
};
class C
render() {
return (
<div onClick={() => {
this.setState((previousState)=>{//setState로 이전 스테이트를 변경한다.
const newState ={count: previousState.count + 1}
return newState;
});
}}>{this.state.s} : {this.state.count}</div>
);
}
}
Event Handling
- camelCase 로만 사용할 수 있다. ex)onClick, onMouseEnter
- 이벤트에 연결된 자바스크립트 코드는 함수이다.이벤트={함수} 와 같이 씁니다.
- 실제 DOM 요소들에만 사용 가능. 리액트 컴포넌트에 사용하면, 그냥 props 로 전달한다.
Render 함수
Props 와 State 를 바탕으로 컴포넌트를 그리고 Props 와 State 가 변경되면, 컴포넌트를 다시 그리는데 이때 컴포넌트를 그리는 방법을 기술하는 함수를 랜더링이라고 한다.
