반응 상태 패턴 | 8일차

요약 →

State → 시간에 따라 변할 수 있는 가변 값의 모음입니다.

상태는 변경할 수 있지만 소품은 변경할 수 없다는 점에서 소품과 유사합니다.

기존 상태 업데이트 →

앞서 우리는 State의 값을 변경/변경했지만 변경하지는 않았습니다.

죽이는 ⬇️로 증가하는 Scorekepper 구성 요소가 있는 예를 들어 봅시다 ⬇️

class Scorekeeper extends Component{
    constructor(props){
        super(props);
        this.state = {score:0};
        this.onKill = this.onKill.bind(this);
    }
onKill(){
    this.setState({score:this.state.state+1});
}
    render(){
        return(
            <div>
                <h1> Score is : {this.state.score} </h1>
                <button onClick={this.onKill}>One KILL</button>
            </div>
        )
    }
}

따라서 버튼을 클릭할 때마다 점수가 1씩 업데이트됩니다.

그러나 이것은 편리한 방법이 아닙니다.
why??
아래 예를 살펴보겠습니다. 여기에는 이 점수만 클릭하면 Three kill라는 버튼이 있습니다. 점수가 1씩 증가합니다.

class Scorekeeper extends Component{
    constructor(props){
        super(props);
        this.state = {score:0};
        this.threeKill = this.threeKill.bind(this);
    }
threeKill(){
    this.setState({score:this.state.state+1});
    this.setState({score:this.state.state+1});
    this.setState({score:this.state.state+1});
}
    render(){
        return(
            <div>
                <h1> Score is : {this.state.score} </h1>
                <button onClick={this.threeKill}>Three KILL</button>
            </div>
        )
    }
}

그런데 왜 이것이 작동하지 않습니까 ??

🎯 setState는 비동기식입니다. 따라서 이전 호출이 완료되었다고 가정하는 것은 위험합니다. 또한 반응은 때때로 성능상의 이유로 setState에 대한 배치(함께 스쿼시) 호출을 하나로 합칠 것입니다.

따라서 3개의 호출이 모두 같은 것을 업데이트하므로 우선 순위에 따라 마지막 호출만 실행됩니다.

이거봐 👇

threeKill(){
    this.setState({score: 100});
    this.setState({score: 150});
}

마지막 호출이 실행됩니다.

If a call to setState() depends on current state it’s better to use the “callbacks”

그러나 무엇입니까 Callbacks ?

다른 함수에 인수로 전달되는 함수입니다.

**Like,**
function greet(name,callback){
    const works = "Your work of Day is to plant the Trees"
    const msg = `Good Morning ${name} ` + works;
    callback(msg);
}

function log(msg){
    console.log(msg);
}

greet("Jack" , log);

위의 예에서와 같이 로그 함수를 콜백으로 전달했습니다.

Greet 함수가 완료되면 실행이 완료되고 마지막에 로그 함수가 호출됩니다.

콜백을 전달하면 지금 실행하고 싶지 않기 때문에 괄호와 함께 전달하지 않습니다.

콜백이 필요한 이유 ??
API 또는 데이터베이스에서 데이터를 요청할 때 데이터가 언제 올지 모르기 때문에 이러한 모든 프로세스를 즉시 실행하지 않기 때문에 비동기식이라고 합니다.

그래서 우리는 함수가 실행될 때 콜백을 전달하고 콜백이 호출되고 그것이 업데이트되었음을 ​​알게 되었습니다.

React의 경우와 동일setState 메서드는 비동기식이므로 콜백을 사용할 수 있습니다.

threekill(){
    this.setState(currState)=>{
        return {state:currState+1}
    }
    this.setState(currState)=>{
        return {state:currState+1}
    }
    this.setState(currState)=>{
        return {state:currState+1}
    }   
}

IncTo3(currState){
    return {state:currState+1};
}

threeKill(){
    this.setState(this.IncTo3);
    this.setState(this.IncTo3);
    this.setState(this.IncTo3);
}

나는 당신 중 일부가 우리가 이렇게 할 수 있다고 생각하고 있다는 것을 알고 있습니다 😅

threeKill(){
    this.setState({score:this.state.state+3});
}

그러나 이것은 If a call to setState() depends on current state it’s better to use the “callbacks”를 알려주는 예일뿐입니다.

안전한 방법으로 상태 변경하기 →

상태에서 배열을 정의할 수도 있습니다.

u have to be extra careful while modifying the Array.

내가 임의의 이름을 선택하고 유지하는 임의의 숫자 선택기가 있는 것처럼.

class NumPicker extends Component{
    static defaultProps = {
        names : ["Jayant","Dushyant","Nitin","gaurav","kartik"]
    }
    constructor(props){
        super(props);
        this.state = {arr:["John ","sam "]} 
    }

    Randomizer(){
        const rand = Math.floor(Math.random()*this.props.names.length);
    console.log(rand);
    console.log(...this.state.arr,this.props.names[rand]);
        //It will make a copy of the arr object with an extra name.
    return this.setState({arr:[...this.state.arr,this.props.names[rand]]})
    }

    render(){
        return(
            <div>
                    <h1>Random Names are :{this.state.arr} </h1>
                    <button onClick={this.Randomizer}>Randomizer</button>
            </div>
        )
    }

}

따라서 배열을 변경하려면 해당 항목을 복사하고 변경한 다음 setState에 전달하십시오.

자세한 내용은 이 기사를 읽으십시오 👇

Handling State in React: Four Immutable Approaches to Consider

디자인 상태 😁

상태 최소화







하향 데이터 흐름

부모는 더 많은 상태 저장 상태여야 합니다.

부모는 대부분의 상태를 가져야 하며 상태를 사용하여 전달됩니다.

할 일 목록의 예를 들어 보겠습니다.

그것은 To-do list 구성 요소, To-do 구성 요소를 가지며 To-do 구성 요소에는 훨씬 더 작은 구성 요소가 있습니다. 따라서 우리가 할 수 있는 것은 변경되는 모든 데이터를 상태로 유지하고 이를 소품으로 전달하는 것입니다.



행복한 코딩 😄