React.js - 하위 컴포넌트에서 상위 컴포넌트 제어하기

프로젝트 진행 중 정말 절망적인 상황이 생겼는데

하위 컴포넌트에서 상위 컴포넌트를 제어해야 하는 상황이었다.

사실 구조를 현명하게 고려하지 않고 진행해서 생긴 상황이다.

 

이런 방법이 있었다.

 

상위에서 state를 만들고, 그 state를 바꾸는 함수를 하위 컴포넌트에 props로 넘긴다.

 

import React, { Component } from 'react'
import Header from './Header/Header.js'
import Section from './Section/Section.js'
import Footer from './Footer/Footer.js'

export default class Container extends Component {

  state = {
    section: 'main'
  }

  _switchingSection = (value) => {
    this.setState({
      section: value
    })
  }

  render() {
    return (
      <div className="wrap">
          <Header _switchingSection={this._switchingSection}/>
          {this.state.section === 'main' ? <Section /> : 'nothing'}
          <Footer />
      </div>
    )
  }
}

 

웃기지만 진짜 저렇게 짰다.

그래서 Header에서 특정 조건이 되었을 때 Section컴포넌트가 바뀌어야 하는 상황이 온 것이다.

그래서. 만들어 둔게 너무 많아서 저렇게 해결했다.

 

Section 컴포넌트가 사라지고있다.

 

너무 부끄럽지만 큰 내용이라 기록한다