React(4) 〓 Form, State -> Props, ...

Ternary & Conditional Rendering 활용

useState

import "./styles.css";
import React from "react";
import Data from "./Data";
import Box from "./components/Box";

export default function App(props) {
  const [data, funct] = React.useState(Data);

  const toggle = (id) => {
    funct((square) => {
      return square.map((square) => {
        return square.id === id
          ? { ...square, on: !square.on }
          : { ...square, on: square.on };
      });
    });
  };

  const analyze = data.map((data) => {
    return <Box id={data.id} on={data.on} toggle={toggle} />;
  });

  return (
    <div className="App">
      <main>
        <h1>Boxes will go here</h1>
      </main>
      {analyze}
    </div>
  );
}

전 React 내용을 보셨다면 Ternary, Conditional Rendering을 같이 쓴 것을 본 적 있으실 겁니다. 이젠 이것을 useState에 활용하는 것이죠.

본론으로 넘어가면 제가 아래에 보여 드리는 이 코드가 Ternary에 관한 내용입니다.

const [data, funct] = React.useState(Data);

const toggle = (id) => {
  funct((square) => {
    return square.map((square) => {
      return square.id === id
        ? { ...square, on: !square.on }
        : { ...square, on: square.on };
    });
  });
};

const analyze = data.map((data) => {
  return <Box id={data.id} on={data.on} toggle={toggle} />;
});

일단 funct를 불렀으니 data에 있는 걸 바꿀 거라는 것이고요, 맵을 이용해 데이터를 불러오게 됩니다.

그 데이터는 아래 코드에 있습니다.

이제 삼항(Ternary) 연산자를 쓰게 됩니다.

코드 진행상 우선 id가 같아야 한다는 전제고요, 같으면 이 square에다가 뭔가 on과 반대되는 걸로 바꿀 것이라는 걸 아실 겁니다. 같지 않으면 놔둬야 하니 !표를 쓰지 않았고요.

export default [
  {id: 1, on: true},
  {id: 2, on: false},
  {id: 3, on: true},
  {id: 4, on: true},
  {id: 5, on: false},
  {id: 6, on: false}
];

Conditional Rendering도 활용해 보겠습니다.

import "./styles.css";
import React from "react";
import Data from "./Data";

export default function App() {
 const [messages, setMessages] = React.useState(Data);

 let cnt = 0;

 const print = messages.map((dat) => {
   if (dat.read === false) {
     cnt++;
     return (
       <div>
         {dat.message}
         <input type="button" value="read" />
       </div>
     );
   } else {
     return <div>{dat.message}</div>;
   }
 });

 return (
   <div className="App">
     {cnt === 1 && <h1>You have a unread message!</h1>}
     {cnt >= 2 && <h1>You have {cnt} unread messages!</h1>}
     {!cnt && <h1>You're all caught up!</h1>}
     {print}
   </div>
 );
}

이 코드에서

const [messages, setMessages] = React.useState(Data);

let cnt = 0;

const print = messages.map((dat) => {
  if (dat.read === false) {
    cnt++;
      return (
        <div>
          {dat.message}
          <input type="button" value="read" />
        </div>
      );
  } else {
    return <div>{dat.message}</div>;
  }
});

<div className="App">
    {cnt === 1 && <h1>You have a unread message!</h1>}
    {cnt >= 2 && <h1>You have {cnt} unread messages!</h1>}
    {!cnt && <h1>You're all caught up!</h1>}
    {print}
</div>

이 부분이 조건부 렌더링을 활용할 부분이겠죠? 보시면 read가 false이면 읽지 않은 문자로 인식해 그 개수를 세게 됩니다. 그러고 읽음 표시하기 위해 버튼을 추가하게 되겠죠. true면 어차피 읽었으니 버튼을 빼게 됩니다.

​

이제 Conditional Rendering할 건데 읽은 개수에 따라 뜨는 게 달라지겠죠? 조건에 맞으면 맨 오른쪽에 있는 게 출력될 것이니 지금 아래 코드를 보았을 때 false가 2개니까 cnt >= 2의 조건이 성립하겠죠?

그러면 h1 태그로 감싼 You have 2 unread messages!가 출력됩니다.

export default [
  {message: "오늘 머행?", read: false},
  {message: "바쁨 수구", read: false}
];