React Native Child에서 Parent State 변경하는 방법

리액트 네이티브로 어플을 만들고 있는데 검색기능을 구현해야했다.

기존에 타임라인 형식으로 글을 보여주는 게시판이 하나 있었는데

검색기능도 필요할 것 같아서 구현하던 중 막히는 부분이 생겼다.

현재 나는 Board Component에서 게시글을 보여주는 형태인데,

특정 버튼을 클릭하면 Search Component가 Modal형태로 올라온다.

(게시글에 관련된 정보는 모두 Board Component의 State에 박혀있다)

따라서 Board가 Parent이고 Search가 Child Component이다.

Search에서 API요청을 하고 받아온 값을 Parent인 Board의 State로 업데이트 해줘야 하는데

리액트에서의 State는 부모에서 자식으로 흐르기 때문에 어떻게 해줘야 할지 난감했다.

그러다 방법을 찾았는데 나름 간단하다.

먼저 아래와 같은 소스가 있다고 가정한다.

[부모 컴포넌트]

class Parent extends Component {

    constructor(props) {

        super(props)

        this.state = {

            isExist: false

        };

    }

    handler() {

        this.setState({

            isExist: true

        });

    }

    render() {

        return <Child action={this.handler} />

    }

}

[자식 컴포넌트]

class Child extends Component {

    render() {

        return (

            <View>

                <Button onClick={this.props.action} />

            </View>

        )

    }

}

state를 바꾸는 함수를 하나 만들고(handler) 해당 함수를 자식에게 props로 넘겨준다.

그 다음 자식 컴포넌트에서는 단순히 this.props.이름 을 통해 호출해주기만 하면 된다.

참고 : https://ourcodeworld.com/articles/read/409/how-to-update-parent-state-from-child-component-in-react