react > props, state

props (전달)

부모한테서 자식으로 데이터가 전달되는 형식

1. 데이터 전달 예제

<div  id="root">

<script  type="text/babel">

//props!

class  Input  extends  React.Component{

// 없어도 됨.

// constructor(props){

// super(props)

// }

render(){//props가 이 데이터를 읽어줌

const  Ele = React.createElement(

'div',

{

value:1,

name:'ingoo'

}

)

return(

<input  type="text"  value={this.props.value}/>

)

}

}

//Props State

class  App  extends  React.Component{

render(){

return(

<div><Input  value={1}/></div>

)

}

}

ReactDOM.render(

<App/>,

document.querySelector('#root')

)

</script>

</div>

2. APP안에 A가 있고 A안에 C가 있다.APP안에 B가 있고 B안에 D가 있다.

데이터의 흐름을 잘 생각해야한다.

<div  id="root"></div>

<!-- APP안에 A가 있고 A안에 C가 있다. -->

<!-- APP안에 B가 있고 B안에 D가 있다. -->

<script  type="text/babel">

class  D  extends  React.Component{

render(){

const {text2}=this.props

return (

<span>

{text2}

</span>

)

}

}

class  C  extends  React.Component{

render(){

const {text1}=this.props

return (

<span>

{text1}

</span>

)

}

}

class  B  extends  React.Component{

render(){

const {name}=this.props

return(

<div  className="dasdfs">

{this.props.name}

<D  text2={name}/>

</div>

)

}

}

class  A  extends  React.Component{

render(){

const {name}=this.props  //A를 건내받아옴

return(

<div>

{this.props.name}

<C  text1={name}/>

</div>

)

}

}

class  App  extends  React.Component{

render(){

return(

<div>

<A  name={'ingoo'}/>

<B  name={'ingoo2'}/>

</div>

)

}

}

ReactDOM.render(

<App/>,

document.querySelector('#root')

)

</script>

js 파일 안에서는 div class="“가 아닌 div className=”"이다.

state (저장)

상태가 변하는 데이터는 무조건 state안에 들어가야 하기 때문에
데이터 양이 많아져도 무조건 state안에 다 넣어야한다.

1. 로그인 로그아웃 클릭시 버튼 변경

<div  id="root"></div>

<script  type="text/babel">

class  Login  extends  React.Component{

//state는 무조건 객체로 해줘야한다.

//변수명이 절대 바뀌면 안된다.

state = {

isLogin:false,

  

}

//만약 상태를 바꾸고 싶다면

render(){

const  obj = {

...this.state,

isLogin:!this.state.isLogin

}

return(

// 익명함수에 담아서 쓰이도록 한다.

// 안누르면 로그인, 누르면 로그아웃이 뜨도록 함

<button  onClick={()=>{this.setState(obj)}}>

{this.state.isLogin ? '로그아웃':'로그인'}

</button>

)

}

}

class  App  extends  React.Component{

render(){

return(

<div>

<Login/>

</div>

)

}

}

ReactDOM.render(

<App/>,

document.querySelector('#root')

)

</script>

<!-- 버튼 -->

<button  id="asdf"  onclick="alert('버튼 클릭함')">버튼</button>

2. counter 예제

<div  id="root"></div>

<script  type="text/babel">

class  Counter  extends  React.Component{

state={

number:0,

}

incre = (index)=>{

const  increase = {

...this.state,

number:this.state.number+index,

}

this.setState(increase)

}

decre = (index)=>{

const  decrease = {

...this.state,

number:this.state.number-index,

}

this.setState(increase)

}

render(){

// const increase = {

// ...this.state,

// number:this.state.number+1,

// }

// const decrease = {

// ...this.state,

// number:this.state.number-1,

// }

// setState = 객체의 상태를 변경할때 쓰는 react지정 함수

return(

<div>

<h3>{this.state.number}</h3>

<button  onclick={()=>{this.incre(2)}}>+</button>

<button  onclick={()=>{this.decre(2)}}>-</button>

</div>

)

}

}

class  App  extends  React.Component{

render(){

return(

<div>

<Counter/>

</div>

)

}

}

ReactDOM.render(

<App/>,

document.querySelector('#root')

)

</script>

함수를 이용할땐 ()=>익명함수를 이용하는 습관을 들여야한다.

함수의 인자값을 넣으려 하면 실행도 안됐는데 다 실행되어 버린다.
그걸 막으려면 익명함수로 감싸서 막아주는 습관을 들여야함