[조건부렌더링/state 데이터 관리] 우정테스트 사이트 만들기(Feat.리액트)

* 조건부렌더링 

각각의 페지이마다 조건부렌더링을 해주려면 가장먼저 필요한 부분은 App.js 에 state에 page값을 만들어줘야한다.

 

class App extends React.Component {

     .....

    this.state {

        name: "손흥민"

        page: "quiz"

   };

}

 

그다음에는 리턴해줄때 각 조건에 맞는 페이지를 보여줄 수 있도록 조건을 걸어주면된다!

 

render () {

   return (

      <div className="App">

         {this.state.page === "quiz" && (<Quiz/>)} 

         // 조건이 참일경우 퀴즈페이지를 보여줘라 라는 의미

         {this.state.page === "start" && (<Start name={this.state.name}/>)} 

         {this.state.page === "score" && (<Score/>)} 

      </div>

   )

}

 

이렇게 조건부렌더링을 작성해두고 state에 page값을 변경한다면 정상적으로 페이지가 바뀌는걸 볼 수있다.

 

 

* 필요한 데이터를 state를 통해 넘겨줘보자

 

1) quiz 페이지에 필요한 문제를 list로 넘겨주자.

    (퀴즈에 대한 문제와 정답이 있으므로 딕셔너리 형태로넘겨주는게 좋다.)

 

class App extends React.Component {

     .....

    this.state {

        name: "손흥민"

        page: "quiz"

        list: [

          {question: "손흥민 프로데뷔 팀은 레베쿠전이다.", answer: "X"},

          {question: "손흥민 프로데뷔 팀은 함부르크이다.", answer: "O"},

         {question: "손흥민 프로데뷔 팀은 토트넘이다.", answer: "X"},

         ]

   };

}

 

2) 이렇게 state에 list값을 추가했다면, 조건부렌더링을 할때 list값을 같이 넘겨주면된다.

         {this.state.page === "quiz" && (<Quiz list={this.state.list}/>)} 

 

3) 이제 Quiz.js에서는 props를 통해 list값을 받아오면된다.

 

const  Quiz  = (props) => {

 

const list = props.list;

...

 

<Question>{list[0].question}<Question/>

 

...

 

이런식으로  추가를 해준다면, props 받아온 list값중 첫번째 문제를 띄워주는 걸 볼 수 있다.

 

ScoreMsg 또한 위와동일한 방법으로 활용한다면 어렵지않을거다!

이부분은 자유롭게 실습해보면서 동작원리를 이해해보자.