4기 카카오 프론트 전체 스터디 - 리액트 2주차 (조건부 렌더링, 리스트, 스타일링, 폼 다루기)

이번에는 리액트를 스타일링하는 것 그리고 양식 및 사용자 입력에 대한 폼 다루는 방법을 이야기해 보겠다.

목표

이를 통해 이룰 목표는 다음과 같다.

• 조건부 렌더링
• 리스트 렌더링 / key
• Styled-components / Tailwind CSS
• 폼 다루기

하나식 해결해 보자.

조건부 렌더링

우리는 조건부에 따라서 렌더링을 부분적으로 일으킬 수 있다. 코드를 살펴보자.

예시 1 (if문 작성)

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);

심플하게 보면, if문을 이용해서 조건부로 렌더링을 할 수 있다.

이보다 더 코드를 축약하고 싶다면 삼항연산자를 사용하면 된다.

예시 2 (삼항연산자)

<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>

true이면 ":" 연산자 앞에 있는 컴포넌트가 렌더링 되고, 그게 아니면 뒤에 있는 컴포넌트가 렌더링이 된다.

else 분기가 필요하지 않으면 더 짧은 && 연산자를 사용할 수도 있다.

<div>
  {isLoggedIn && <AdminPanel />}
</div>

---

리스트 렌더링 / key

반복되는 리스트를 렌더링 하는 방법이 있다. 바로 map()이라는 함수를 사용하는 것이다. 코드를 살펴보자.

예를 들어..

const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];

이런 리스트가 있다고 치자. 그러면

const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];

const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);

그 리스트를 map함수로 가져오고 그것을 변수에 할당할 수 있다.

코드를 살펴보면 product라는 리스트의 title를 <li> 태그로 반복하여 렌더링 할 수 있게 만든다.

이것을 const로 선언 이후 return 값에 <ui> 태그로 렌더링 하게 만든다.

key의 중요성

이때, <li>에 key 값을 할당한다.

목록의 각 항목에 대해, 형제 항목 사이에서 해당 항목을 고유하게 식별하는 문자열 또는 숫자를 전달해야 한다.

React는 나중에 항목을 삽입, 삭제 또는 재정렬할 때 어떤 일이 일어났는지 알기 위해 key를 사용한다.

key는 할당해야 하며 그렇지 않으면 에러가 뜬다. key는 보통 id값을 할당해 주는 것이 관례이다.(상황에 따라 달라질 수 있음)

Styled-components / Tailwind CSS

이제, 전반적인 스타일링에 대한 이야기를 조금 해보겠다.

리액트에선 스타일링을 여러 방식으로 진행이 가능하다.

리스트를 좀 뽑으면.

• 바닐라 css
• 인라인 스타일링
• css 모듈로 스코핑하기
• Styled-components
• Tailwind CSS

이 정도이다. (참고로 스타일링도 동적으로 할당이 가능하다.)

바닐라 css는 그냥 일반적인 css이다. 우리가 전부 다 알고 있는 css...

인라인 스타일링도 있고, css모듈로 스코핑하는 것도 있다.

그다음, Styled-components가 있다.

이건 말 그대로 컴포넌트 안에 스타일링까지 박는 것을 뜻한다. 일명 css-in-js인 것.

간략한 코드는 >

npm i styled-components

---

import styled from "styled-components";

const Button = styled.button`
  background: lightblue;
  border: none;
  padding: 12px 40px;
  cursor: pointer;
`;

....

function App() {
  return <Button>클릭</Button>
}

이런 식으로 문법을 작성하고, 내가 할당하고 싶은 컴포넌트에 스타일링을 할 수 있다.

jsx에 HTML / CSS / JavaScript가 다 때려 박혀있는 모습을 볼 수 있다.

---

근데...

https://careerly.co.kr/comments/118367

달레 / 굿바이 Styled Components | 커리어리

정말 놀랍게도 공식적으로 개발을 중단한다고 오피셜로 떴다. css-in-js 라이브러리에서 가장 인기가 많은 라이브러리여서 바로 사라지지는 않고 서서히 사라지겠지만, 새로운 프로젝트는 적용하는 것은 지양하길 바란다.

TailWind

그래서 TailWind가 있다. 이 친구도 비슷한 라이브러리이다.

공식 홈페이지 >

https://tailwindcss.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

코드를 살펴보자.

<div class="flex flex-col items-center gap-6 p-7 md:flex-row md:gap-8 rounded-2xl">
  <div>
    <img class="size-48 shadow-xl rounded-md" alt="" src="/img/cover.png" />
  </div>
  <div class="flex items-center md:items-start">
    <span class="text-2xl font-medium">Class Warfare</span>
    <span class="font-medium text-sky-500">The Anti-Patterns</span>
    <span class="flex gap-2 font-medium text-gray-600 dark:text-gray-400">
      <span>No. 4</span>
      <span>·</span>
      <span>2025</span>
    </span>
  </div>
</div>

이 라이브러리도 jsx에 스타일링을 박아버리는 모습을 볼 수 있다.

공식 화면

npm으로 설치하는 방법 >

npm install tailwindcss @tailwindcss/vite

이는 vite로 빌드되어 있는 프로젝트에 적용하는 방법이다.

이 밖에 리액트나 Next.js에 적용하는 방법들이 존재한다. 이에 대한 것은 공식문서를 참고하자.

https://tailwindcss.com/docs/installation/using-vite

Installing with Vite - Installation

---

폼 다루기

생각보다 form은 다루기 어렵다.

물론 컴포넌트를 만들고 사람들에게 form를 제안하는 건 어렵지 않다.(직관적이어서)

그러나 form의 유효성 체크. 즉 "form"의 기능을 제대로 테스트하는 부분에서 좀 까다롭다. (이거 때문에 라이브러리도 있다.)

라이브러리

가장 유명한 라이브러리는 리액트 훅 폼이라는 라이브러리이다.

https://react-hook-form.com/

React Hook Form - performant, flexible and extensible form library

---

form 레퍼런스

코드를 간략하게 확인해 보자.

export default function Search() {
  function search(formData) {
    const query = formData.get("query");
    alert(`You searched for '${query}'`);
  }
  return (
    <form action={search}>
      <input name="query" />
      <button type="submit">Search</button>
    </form>
  );
}

기존적으로 제공해 주는 form을 이용해서 form를 다룰 수 있다.

그리고, 방법은 진짜 여러 가지가 존재한다.

1. State와 Handler 사용하는 방법
2. Ref를 사용하는 방법
3. FormData와 브라우저 API 사용
4. 커스텀 Hook 사용
5. 라이브러리 사용 (이건 위에서 제공해 줌)

관련 링크 >

https://jeonghwan-kim.github.io/dev/2022/03/29/react-form-and-formik.html

리액트로 폼(Form) 다루기

---

https://rudaks.tistory.com/entry/react-form%EC%9D%84-%EB%8B%A4%EB%A3%A8%EB%8A%94-5%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95

[react] form을 다루는 5가지 방법

---