클래스형 컴포넌트
import React, { Component } from 'react';
import './App.css'
class App extends Component{
render(){
const name = 'react';
return <div className='react'>{name}</div>;
}
}
export default App;
클래스형 컴포넌트와 함수 컴포넌트의 차이점 : 클래스형 컴포넌트의 경우 이후 배울 state 기능 및 라이프 사이클 기능 사용 가능, 임의 메서드 정의 가능
클래스형 컴포넌트에서는 render 함수가 꼭 있어야하고, 그 안에서 보여 주어야 할 JSX 반환해야 함.
보통 함수 컴포넌트와 Hooks 사용 권장, 그치만 일단 알아두자..
const MyComponent = () => { //화살표 함수 문법
return <div> 나는 새삥 </div>;
};
export default MyComponent;
function 키워드 사용 안하고 화살표 문법 사용 가능
import MyComponent from './MyComponent';
const App = () => {
return <MyComponent/>;
}
export default App;
import 하기.
JSX 내부에서 props 렌더링
const MyComponent = props => { //화살표 함수 문법
return <div> 하이, 내 이름은 {props.name}임! </div>;
};
export default MyComponent;
import MyComponent from './MyComponent';
const App = () => {
return <MyComponent name="React "/>;
}
export default App;
props 값은 컴포넌트 함수의 파라미터로 받아 와서 사용 가능
props 기본 값 설정 : defaultProps
const MyComponent = props => { //화살표 함수 문법
return <div> 하이, 내 이름은 {props.name}임! </div>;
};
MyComponent.defaultProps={
name: '기본 이름'
};
export default MyComponent;
import MyComponent from './MyComponent';
const App = () => {
return <MyComponent />;
}
export default App;
props 값을 따로 지정하지 않았을 때 보여줄 기본값 설정
children
import MyComponent from './MyComponent';
const App = () => {
return <MyComponent>리액트</MyComponent>;
};
export default App;
const MyComponent = props => {
return(
<div>
하이 내 이름은 {props.name}! <br />
children 값은 {props.children} 임.
</div>
)
};
MyComponent.defaultProps={
name: '기본 이름'
};
export default MyComponent;
컴포넌트 태그 사이의 내용을 보여주는 props
const MyComponent = props => {
const {name, children} = props;
return(
<div>
하이 내 이름은 {name}! <br />
children 값은 {children} 임.
</div>
)
};
MyComponent.defaultProps={
name: '기본 이름'
};
export default MyComponent;
비구조화 할당을 통해서 더 짧은 코드로 사용.
const MyComponent = ({name, children}) => {
return(
<div>
하이 내 이름은 {name}! <br />
children 값은 {children} 임.
</div>
)
};
MyComponent.defaultProps={
name: '기본 이름'
};
export default MyComponent;
더 깔끔한 버전
propTypes를 통한 props 검증
import PropTypes from 'prop-types';
const MyComponent = ({name, children}) => {
return(
<div>
하이 내 이름은 {name}! <br />
children 값은 {children} 임.
</div>
)
};
MyComponent.defaultProps={
name: '기본 이름'
};
MyComponent.propTypes={
name: PropTypes.string
};
export default MyComponent;
name 값은 무조건 string 형태로 전달해야 된다는 것 의미.
PropTypes.isRequired
import PropTypes from 'prop-types';
const MyComponent = ({name, children, favoriteNumber}) => {
return(
<div>
하이 내 이름은 {name}! <br />
children 값은 {children} 임. <br />
제일 좋아하는 숫자는 {favoriteNumber}임.
</div>
)
};
MyComponent.defaultProps={
name: '기본 이름'
};
MyComponent.propTypes={
name: PropTypes.string,
favoriteNumber: PropTypes.number.isRequired
};
export default MyComponent;
import MyComponent from './MyComponent';
const App = () => {
return <MyComponent name="React" favoriteNumber={1} >리액트</MyComponent>;
};
export default App;
propTypes 지정하지 않았을 때 경고 메시지 띄워 줌
state : 컴포넌트 내부에서 바뀔 수 있는 값
props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용 가능.
props 바꾸려면 부모 컴포넌트에서 바꾸어 주어야 함.
import React, {Component} from "react";
class Counter extends Component{
constructor (props){
super(props);
this.state = {number : 0};
}
render(){
const {number} = this.state;
return(
<div>
<h1>{number}</h1>
<button
onClick={() => {
this.setState ({ number : number+1});
}}>
+1
</button>
</div>
);
}
}
export default Counter;
constructor (props){
super(props);
this.state = {number : 0};
}
컴포넌트의 생성자 메서드. 클래스형 컴포넌트에서 constructor 작성 시 반드시 super(props) 호출.
이 함수 호출되면 현재 클래스형 컴포넌트가 상속 받고 있는 리액트의 Component 클래스가 지닌 생성자 함수 호출
render(){
const {number} = this.state; //state 조회할 때는 this.state로 조회
return(
<div>
<h1>{number}</h1>
<button
//onclick을 통해 버튼이 클릭 되었을 때 호출할 함수 지정
onClick={() => {
//this.setState 통하여 state에 새로운 값 넣기 가능
this.setState ({ number : number+1});
}}>
+1
</button>
</div>
);
}
import Counter from "./Counter";
const App = () =>{
return <Counter />;
};
export default App;
숫자가 1씩 카운트업 됨.
import React, {Component} from "react";
class Counter extends Component{
constructor (props){
super(props);
this.state = {number : 0, fixedNumber : 0};
}
render(){
const {number, fixedNumber} = this.state;
return(
<div>
<h1>{number}</h1>
<h2>바뀌지 않는 값 : {fixedNumber}</h2>
<button
onClick={() => {
this.setState ({ number : number+1});
}}>
+1
</button>
</div>
);
}
}
export default Counter;
state 객체 안에 여러 값이 있을 때 위와 같은 방법으로 수정하면 됨
state = {
number : 0,
fixedNumber : 0
}
Constructor 사용하지 않고도 state 초깃값 설정하는 방법.
import React, {Component} from "react";
class Counter extends Component{
state = {
number : 0,
fixedNumber : 0
}
render(){
const {number, fixedNumber} = this.state;
return(
<div>
<h1>{number}</h1>
<h2>바뀌지 않는 값 : {fixedNumber}</h2>
<button
onClick={() => {
this.setState(prevState=> {
return{
number : prevState.number + 1
};
});
this.setState(prevState=> ({
number : prevState.number + 1
}));
}}>
+1
</button>
</div>
);
}
}
export default Counter;
만약 숫자를 2씩 증가시키고 싶다면 this.setState를 사용할 때 객체 대신에 함수 인자로 넣어줌.
<button
onClick={() => {
this.setState({
number: number+1
}, ()=>{
console.log('방금 setState가 호출 되었습니다.');
console.log(this.state);
});
}}>
+1
</button>
콜백 함수를 등록
Hooks (useState)
import React, {useState} from "react";
const Say = () =>{
const [message, setMessage] = useState(''); //배열 비구조화 할당
const onClickEnter = () => setMessage('안녕하세요!');
const onClickLeave = () => setMessage('안녕히 가세요!');
return (
<div>
<button onClick={onClickEnter}> 입장 </button>
<button onClick={onClickLeave}> 퇴장 </button>
<h1> {message} </h1>
</div>
);
};
export default Say;
Unstate 함수의 인자에는 상태의 초깃값 넣어준다. useState에서의 state 초깃값은 반드시 객체가 아니어도 상관없음. 값의 형태가 자유롭다.
배열의 첫 번째 원소는 현재 상태, 두 번째 원소는 상태를 바꾸어주는 함수 - Setter 함수
이름은 자유롭게 설정 가능하다.
import React, {useState} from "react";
const Say = () =>{
const [message, setMessage] = useState('');
const onClickEnter = () => setMessage('안녕하세요!');
const onClickLeave = () => setMessage('안녕히 가세요!');
const [color, setColor] = useState('black');
return (
<div>
<button onClick={onClickEnter}> 입장 </button>
<button onClick={onClickLeave}> 퇴장 </button>
<h1 style={ {color}}> {message} </h1>
<button style={{ color: 'red'}} onClick={() => setColor('red')}>
빨간색
</button>
<button style={{ color: 'green'}} onClick={() => setColor('green')}>
초록색
</button>
<button style={{ color: 'blue'}} onClick={() => setColor('blue')}>
파란색
</button>
</div>
);
};
export default Say;
useState는 한 컴포넌트에서 여러번 사용해도 상관없음.
*정리
props : 부모 컴포넌트가 설정
state : 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트 가능.
'FE > React & TS' 카테고리의 다른 글
[REACT] component / state / useEffect (0) | 2023.05.08 |
---|---|
[REACT] create-react-app (0) | 2023.05.08 |
[REACT] propTypes (0) | 2023.05.08 |
[REACT] JSX / setState / converter (0) | 2023.02.15 |
[REACT] JSX (0) | 2023.02.07 |