props/state

1.props

props 는 properties 의 줄임말로, 컴포넌트의 속성을 사용할 때 사용하는 요소이다. props는 해당 컴포넌트에서 사용할 값을 부모 컴포넌트에서 설정해주어야 한다.

 

1) 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 값을 기본설정을 하고 싶을 경우 

<현재 컴포넌트>에서 defaultProps를 이용해 설정할 수 있다.

const MyComponent= props=>{

return <div>안녕하세요, 제 이름은 {props.name} 입니다.</div>

Mycomponent.defaultProps={\

name:'기본이름',

};

 

2) children

 

children은 리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여주는 props이다.

 

<부모컴포넌트>

import Mycomponent from './Mycomponent';

const App=()->{

return <Mycomponent>리액트</Mycomponent>

};

export default App;

 

<현재 컴포넌트>

const Mycomponent= props=>{

return(

<div>

안녕하세요, 제 이름은 {props.name}입니다.<br/>

children 값은 {props. childern}입니다.

</div>
);

Mycomponent.defaultProps={

name:'기본이름'

};

export default Mycomponent;

라고 하게 된다면 결과값은

"안녕하세요, 제 이름은 기본 이름입니다."

" children 값은 리액트 입니다."

 

 

3) 비구조화 할당

 

비구조화 할당 (객체에서 값을 추출하는 문법)을 사용하여 내부 값을 바로 추출하는 방법이 있다.

 

<현재 컴포넌트>

const Mycomponent= props=>{

const  {name,childern)=props;

return(

<div>

안녕하세요, 제 이름은 {name}입니다.<br/>

children 값은 {childern}입니다.

</div>
);

Mycomponent.defaultProps={

name:'기본이름'

};

export default Mycomponent;

 

<부모컴포넌트>

import Mycomponent from './Mycomponent';

 

const App=()=>{

return <Mycomponent name="React">리액트</Mycomponent>

export default App;

라고 하게 된다면 결과값은

"안녕하세요, 제 이름은 React입니다."

" children 값은 리액트 입니다."
가 된다.

 

*클래스형 컴포넌트에서 props를 사용할 때는 render 함수에서  this.pros를 조회하면 된다.

 

2.state

state 는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. props는 부모 컴포넌트가 설정한 값을 컴포넌트 자신은

읽기 전용(즉 자신은 내용 수정이 불가)한 것과와는 다르다.

 

리액트에 state 종류는 2가지가 있다. 클래스형 컴포넌트에서 사용하는 state 와 함수를 통해 사용하는 useState가 있다.

 

1) 클래스형 state

 

import React,{Component} from 'react';

 

class Counter extends Component {

constructor(props){

super(props);

//state의 초기값 설정하기

this.state={

number:0;

};

}

render(){

const {number} =this. state;

return (

<div>

<h1>{number}</h1>

<button onClick={()=>{

this.setState({number:number+1});

}}> +1 </button>

</div>

):

}

}

*state를 조회할 때는 this.state로 조회한다. / 컴포넌트의 state는 객체 형식이여야 한다.

위의 코드에서 constructor(props){...생략}  부분은 컴포넌트 생성자 메서드로 클래스형 컴포넌트에서 constructor를

작성할 때 반드시 super(props)를 호출해 주어야 한다.이 함수가 호출되면 현재 클래스형 컴포넌트가 상속받고 있는

리액트의 Component 클래스가 지닌 생성자 함수를 호출해 준다.

 

button 안에 onClick이라는 값을 props 형태로 넣어 주었는데, 이는 버튼이 클릭될 때 호출시킬 함수를 설정한 것이다.

이벤트로 설정할 함수를 넣어줄 때는 화살표 함수 문법을 사용한다.

 

 

2)함수형  state

 

그렇지만 함수형 컴포넌트가 쓰기도 편하고 비슷한 기능을 쓰고자 useState라는 함수를 사용하여

만들 수 있게 되었고 이 과정에 hooks들이 탄생하게 되었다.

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;

 

useState 함수의 인자에는 상태의 초기값을 넣어준다. 클래스형 컴포넌트에서 state의 초기값은

객체 형태를 넣어 주어야 하지만 useState는 반드시 객체가 아니여도 상관없다.

여기서 messages는 현재 상태(state 저장)이고, setMessage는 상태를 갱신해주는 함수이다. 

*useState는 한 컴포넌트에서 여러번 사용해도 상관이 없다.