[React Study] 1주차 - React 컴포넌트 사용해서 정적 사이트 만들어보기

ㅎㅎ·2023년 9월 20일

React Techeer study

Study

목록 보기

1/4

1주차 태스크:
CRA로 React 프로젝트 생성하는 방법과 React 컴포넌트에 대해 이해하기

1주차 - React 컴포넌트 사용해서 정적 사이트 만들어보기

Flex와 Grid 개념

1분 코딩의 글이 정말 잘 나와있어서 항상 애용했었는데, 리더님이 추가로 게임을 활용해서 연습해볼 수 있는 링크를 알려주심.

1분 코딩 설명 게시물

게임을 통해 연습해볼 수 있는 링크

공부 내용

CSS - Flex 사용해보기
Footer , Header 를 고정시켜보기
React 컴포넌트 props 연습해보기

코드 리뷰

0. App.js

import React from "react";
import "./App.css";
import Round from "./components/Round";
import Header from "./components/Header";
import Footer from "./components/Footer";
import User from "./components/User";

function App() {
  return (
    <div className="App">
      <Header />
      <div className="content-wrap">
        <div className="section1">
          <div className="section1-user">
            <User img="images/cat.jpg" name="Team-B" job="REACT STUDY" />
          </div>
          <div className="section1-user">
            <User
              img="images/puppy.jpg"
              name="HANA"
              job="FRONTEND"
              align="right"
            />
          </div>
        </div>
        <div className="section2">
          <div className="section2-right">
            <div>
              <Round color="#004225" />
            </div>
            <div>
              <Round />
            </div>
            <div>
              <Round color="#004225" />
            </div>
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
}

export default App;

// 컴포넌트는 일종의 UI 조각, 쉽게 재사용
// JSX란 리액트 컴포넌트에서 xml 형식의 값을 반환해주는 것

1. Header

Header 와 거의 같음

3. Round

Round.jsx

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

export default function Round({ color }) {
  return <div className="roundBack" style={{ backgroundColor: color }}></div>;
}

Round.css

.roundBack {
  width: 80%;
  min-width: 800px;
  max-width: 1200px;
  height: 240px;
  margin: 0 auto;
  border-radius: 150px;
  border: 10px #f5f5dc solid;
  background-color: #ffb000;
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.4);
}

4. User

User.jsx

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

export default function User({ img, name, job, align }) {
  return (
    <div className="user">
      <div
        className={align === "right" ? "user-box flexDirection" : "user-box"}
      >
        <div className="user-img">
          <img src={img} alt="Cat" />
        </div>
        <div style={{ width: "80px" }}></div>
        <div className="user-profile">
          <div>
            <h1>{name}</h1>
            <p>💻 {job}</p>
          </div>
        </div>
      </div>
    </div>
  );
}

img, name, job, align 을 매개변수로 상위 컴포넌트에서 받아옴

삼항 연산자 사용

className={align === "right" ? "user-box flexDirection" : "user-box"}

align이 right일 경우 className을 user-box flexDirection 로 설정하고 아닐 경우 user-box만 설정함.
flexDirection에는 요소를 역방향으로 설정하는 css 코드가 들어가있음.

User.css

.user-box {
  width: 100%;
  height: 100%;
  padding: 30px 40px;
  display: flex;
  border: 10px #ffb000 solid;
  border-radius: 150px;
  background-color: #f5f5dc;
}

.flexDirection {
  flex-direction: row-reverse;
  text-align: right;
}

.user-img > img {
  width: 230px;
  height: 230px;
  object-fit: cover;
  border-radius: 100%;
}

.user-profile {
  width: 100%;
  height: 100%;
  padding-top: 30px;
}
.user-profile > div > h1 {
  font-size: 48px;
  font-weight: 800;

  margin-bottom: 20px;
  color: #004225;
}
.user-profile > div > p {
  font-size: 20px;
  font-weight: 700;
  color: #004225;
}

결과물

피드백 및 질의응답

CSS 폴더 관리

components 폴더에 Header.css 와 Header.jsx 를 같이 넣어놨더니 멘토님이 보통 컴포넌트 폴더에는 컴포넌트만 놓고 css는 따로 폴더를 만들어서 관리한다고 함.

짧게 찾아보니 styles 폴더에 정리한다는 것 같아서 위 처럼 정리해봄.

다른 사람들의 리뷰에서는 styled-component 나 tailwind 를 사용하는 듯. 둘 중에서도 스타일 컴포넌트를 더 많이 사용하는 것 같음. 나중에 둘 다 찾아봐야겠다.

Tailwind

Q1: 리더님의 리뷰를 듣는데 Tailwind 를 사용하심. 이 방법을 이용하는 이유가 있는지?

A1:

단축어로 되어있어 편리함

Next.js 사용 시 Tailwind 가 거의 필수임

Q2: CSS를 작성할 때 용도 별로 className을 사용하는 걸 선호하는데, Tailwind 에는 그런 방법이 없는지?

A2: 변수를 사용해서 묶을 수 있음

2주차 태스크:
React Router v6 공부하고, 적용해보기

ㅎㅎ

Backend

다음 포스트