[6주차] 리액트 스탠다드 수업: 조건부 랜더링 (매우중요)

조건부 랜더링

조건부 랜더링을 연습해보자

 

기능구현계획

영화 이름이 적혀있는 버튼을 누르면, 해당하는 영화에 영화배우 티모시 샬라메가 맡았던 캐릭터를 사진과 함께 화면에 보여준다

 

 

1. UI 만들기 (버튼과 화면에 표시될 내용)

2. useState 로, firstMovieShown / secondMovieShown / thirdMovieShown 에 대한 state 만들기

==> 이들이, true 값을 받으면 화면에 나오고, 반대의 경우에 화면에 나타나지 않도록 

3. button에 onClick을 줘서 setFirstMovieShown(); setSecondMovieShown(); setThirdMovieShown(); 을 리턴값으로 넣기

4. 화면에 표시될 내용의 태그들에 대한 조건을 삼항연산자를 통해 (if 문은 Jsx 에 넣을 수 없다)넣어준다.

 

import './App.css';
import {useState} from 'react';



function App() {


  const [firstMovieShown, setFirstMovieShown] = useState(true);
  const [secondMovieShown, setSecondMovieShown] = useState(true);
  const [thirdMovieShown, setThirdMovieShown] = useState(true);


  return (
    <div>
      <h1>Timothee Chalamet's Charactors</h1>
      <div className="button-area"> 
        <button onClick={()=> {
          setFirstMovieShown(true);
          setSecondMovieShown(true);
          setThirdMovieShown(true);
        }}>All</button>
        <button onClick={()=> {
          setFirstMovieShown(true);
          setSecondMovieShown(false);
          setThirdMovieShown(false);
        }}>Dune</button>
        <button onClick={()=> {
          setFirstMovieShown(false);
          setSecondMovieShown(true);
          setThirdMovieShown(false);
        }}>Call Me By Your Name</button>
        <button onClick={()=> {
          setFirstMovieShown(false);
          setSecondMovieShown(false);
          setThirdMovieShown(true);
        }}>Little Women</button>
      </div>
      <div className="display-content-area">
        {firstMovieShown === true ? 
        (<div>
          <p>Paul Atreides</p>
          <img style={{width: "400px"}} src="https://upload.wikimedia.org/wikipedia/en/f/ff/Timoth%C3%A9e_Chalamet_as_Paul_Atreides_%28Dune_2021%29.jpg"/>
        </div>)
        : ("")}

        {secondMovieShown === true ? 
        (<div>
          <p>Elio</p>
          <img style={{width: "400px"}} src="https://static01.nyt.com/images/2017/11/24/arts/24callmeby-web2/24callmeby-web2-superJumbo.jpg"/>
        </div>)
        : ("")}

        {thirdMovieShown === true ? 
        (<div>
          <p>Theodore Laurence</p>
          <img style={{width: "400px"}} src="https://a1cf74336522e87f135f-2f21ace9a6cf0052456644b80fa06d4f.ssl.cf2.rackcdn.com/images/characters/large/800/Theodore-Laurence.Little-Women.webp"/>
        </div>)
        : ("")}
      </div>
    </div>
  );
}

export default App;

 

 

 

---

투두리스트에 적용한 조건부 랜더링 코드

// App.jsx

import { useState } from "react";
import uuid from "react-uuid";
import "./App.css";
import TodoList from "./components/TodoList";

// 11월 10일 추가기능 항목 : 전체 / 할일 / 완료될일 버튼을 만들어 조건부 렌더링하기

function App() {
  const initialState = [
    {
      id: uuid(),
      title: "테스트 제목 1",
      contents: "테스트 내용 1",
      isDone: false,
    },
    {
      id: uuid(),
      title: "테스트 제목 2",
      contents: "테스트 내용 2",
      isDone: true,
    },
    {
      id: uuid(),
      title: "테스트 제목 3",
      contents: "테스트 내용 3",
      isDone: false,
    },
  ];

  const [todos, setTodos] = useState(initialState);
  const [title, setTitle] = useState("");
  const [contents, setContents] = useState("");
  const [isToDoShown, setIsToDoShown] = useState(true);
  const [isDoneShown, setIsDoneShown] = useState(true);


  return (
    <>
      <header
        style={{
          backgroundColor: "#f5dfa2",
          padding: "10px",
        }}
      >
        헤더입니다.
      </header>
      <main
        style={{
          backgroundColor: "#c3f7c9",
          padding: "10px",
        }}
      >
        <div>
          <h3>INPUT 영역</h3>
          <div>
            <form
              onSubmit={function (event) {
                event.preventDefault();

                // TODO: 넣을 객체 생성(new todo)
                const newTodo = {
                  id: uuid(),
                  title,
                  contents,
                  isDone: false,
                };

                // TODO: todos state에 넣어줘야 해!!
                setTodos([...todos, newTodo]);
              }}
            >
              <input
                type="text"
                placeholder="제목입력!"
                value={title}
                onChange={function (event) {
                  setTitle(event.target.value);
                }}
              />
              <input
                type="text"
                placeholder="내용입력!"
                value={contents}
                onChange={function (event) {
                  setContents(event.target.value);
                }}
              />
              <button type="submit">제출</button>
            </form>
            <div>
              <button onClick={function(){
                setIsToDoShown(true);
                setIsDoneShown(true);
              }}>전체</button>
              <button onClick={function(){
                setIsToDoShown(true);
                setIsDoneShown(false);
              }}>할일</button>
              <button onClick={function(){
                setIsToDoShown(false);
                setIsDoneShown(true);
              }}>완료될일</button>
            </div>
            
          </div>
        </div>
        {isToDoShown === true ?
          (
            <TodoList todos={todos} setTodos={setTodos} isDone={false} />
          ) : ("")
        }
        {isDoneShown === true ?
          (
            <TodoList todos={todos} setTodos={setTodos} isDone={true} />
          ) : ("")
        }
        
      </main>
      <footer
        style={{
          backgroundColor: "#c3ddf7",
          padding: "10px",
        }}
      >
        푸터입니다.
      </footer>
    </>
  );
}

export default App;