9. props와 state연결하기

render안에 setState넣으면 둘이 계속 호출해되서 무한반복 일으키니 사용하지 말것-

 

 

부모로 받은 props를 state에 넣을 수 있다

import React , {meno} from 'react';
 
const TryList = memo(   ({ tryInfo }) => {  

    tryInfo.try='hi'; // (x)  
    return(
        <li>
            <span>{tryInfo.try}</span><br/>
            <span>{tryInfo.result}</span>
        </li>
    )
});

export default TryList;

 

부모로 받은 자식이 props를 바꾸면 안된다. 부모가바꿔야 함.

어쩔수없이바꿔야 할 경우

 

(1)props를 state에 넣어준다

import React , {useState, memo} from 'react';
 
const TryList = memo(   ({ tryInfo }) => {  
    const [ result, setResult ] = useState( tryInfo.result );  ////
    return(
        <li>
            <span>{tryInfo.try}</span><br/>
            <span>{tryInfo.result}</span>
        </li>
    )
});

export default TryList;

(2)그리고 state 를 바꿈.

import React , {useState, memo} from 'react';
 
const TryList = memo(   ({ tryInfo }) => {  
    const [ result, setResult ] = useState( tryInfo.result );

    const onClick = () =>{   ///
        setResult('1');
    }
    return(
        <li>
            <span>{tryInfo.try}</span><br/>
            <span onClick={onClick}>{tryInfo.result}</span>  //
        </li>
    )
});

export default TryList;

 

 

class component

import React ,{ Component } from 'react';
 
class TryList extends Component {
    state = {  ////
        result: this.props.result,
        try:this.props.try,
    }

    render(){
        const { tryInfo } = this.props;
        return(
            <li>
               <span>{tryInfo.try}</span><br/>
               <span>{tryInfo.result}</span>
            </li>
        )
    }
}

export default TryList;

기본 객체로는 안되는 구체적인 기능을 덧붙일때

    constructor(props){
        super(props);
    
        const filtered = this.props.filter(()=>{});  ////

        state = {
            result: filtered,
            try:this.props.try,
        }
    }

constructor를 추가해 const filtered 만들어서 이런식으로 추가해준다