다시 시작하는 리액트 - 리액트 실무 기초 2 과제

 

아래 기획서를 보고, 퀴즈 시작하기 화면을 만들어보세요!
<App/> 아래에 <Start/>라는 자식 컴포넌트를 만들어서 해봅시다!
→ 숙제할 때는 꼭꼭 클래스형 컴포넌트를 쓸 필요 없어요! (해설 코드는 함수형 컴포넌트로 나갑니다.)

우리가 배운 내용으로 위 페이지를 만들어봅시다.
이미지도 넣어보고, 내 친구가 이름을 넣을 텍스트 입력 인풋과 시작하기 버튼을 만들어요.
[나는 {} 에 대해서...]부분에 {}는 state에 넣고 prop로 넘겨서 해보세요!

 
- 기획서(레이아웃) 보기
 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
- 내 과제물
 
다 하고나서 생각해보니까 난 prop으로 넘기지 않았다 ㅋ ㅋ ㅋ ㅋ ㅋ ㅋ...
App.js에서 useState를 만들어두고 prop하는게 인상적이지만 그냥 Start component에서 모든걸 해결했다...:)
 
근데 과제 리뷰를 보니 useState에 initialState 값만 집어넣어 놓고 값 변형은 전혀 하지 않았다.
이럴 거면 input창 왜 만들어 놓은거지? 난 이것도 모르고 input에 들어오는 value값으로 변형되게끔 해뒀다.
(사실 내 공부 됐으니까 상관 없다) 
 

 
-  App.js
 

import Start from "./Start";
import styled from "styled-components";

const Wrap = styled.div`
  width: 100%;
  height: 100vh;
  background-color: #f1f1f1;

  display: flex;
  flex-direction: row;
  align-items: center;
`;

function App() {
  return (
    <Wrap>
      <Start />
    </Wrap>
  );
}

export default App;

 
- Start.js
 

import React from "react";
import { useRef } from "react";
import { useState } from "react";
import styled from "styled-components";
import img01 from "./img/img01.png";

const QuizWrap = styled.div`
  width: 320px;
  height: 550px;
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
  margin: 0 auto;
  border: 1px solid #ccc;
`;

const Container = styled.div`
  width: 100%;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;
  background-color: #f4f4f4;

  display: flex;
  flex-direction: column;
  align-items: center;
`;

const ImageWrap = styled.img`
  width: 90%;
`;

const Title = styled.h3`
  margin-top: 20px;

  text-align: center;
`;

const InputWrap = styled.div`
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
`;

const NameInput = styled.input`
  width: 100%;
  height: 30px;
  padding: 16px;
  box-sizing: border-box;
  background-color: white;
  border: 1px solid #918ae9;
  border-radius: 50px;

  color: #666;

  outline: none;

  &::placeholder {
    color: #c2bfe8;
  }
`;

const StartButton = styled.button`
  padding: 10px 24px;
  border: none;
  border-radius: 50px;
  margin-top: 20px;
  background-color: #d5d2f7;

  color: #666;
  font-size: 12px;

  outline: none;
`;

export default function Start() {
  const [name, setName] = useState("르탄이");

  const textInput = useRef(null);
  console.log(textInput);

  const handleChangename = (event) => {
    event.preventDefault();

    setName(textInput.current.value);

    textInput.current.value = "";
  };

  return (
    <QuizWrap>
      <Container>
        <ImageWrap src={img01} alt="르탄이" />

        <Title>나는 {name}에 대해 얼마나 알고 있을까?</Title>

        <InputWrap>
          <NameInput
            type="text"
            ref={textInput}
            placeholder="이름을 입력하세요."
          />
          <StartButton onClick={handleChangename}>시작하기</StartButton>
        </InputWrap>
      </Container>
    </QuizWrap>
  );
}

 
- 여기까지 달려온 후기 :
 
부트캠프에서 react를 내도록 썼지만 솔직히 기초부터 뭐 하나 제대로 잡혀 있는 게 없었기 때문에
매순간 거의 코드를 외워서 썼던 것 같다. (+ 자바스크립트를 잘 몰라서 매순간 로직 외워서 썼다...)
 
근데 이 강의를 들으면서
라이프 사이클 이론 이해 => 클래스형 컴포넌트 사용법에 관하여 배우기 => 함수형 컴포넌트 사용법을 배우기 =>
자바스크립트 지식 대입 과정을 거치니 공부의 질이 달라졌다.
기초를 다진 후 그걸 응용한다는 게 이런 거구나 하고 확 와닿았다.
 
무엇보다 useRef가 있어 input에 들어올 value 값을 useState로 일일이 관리하지 않아도 된다는 것을 깨달아서
지금 현재 매우 행복하다. 공부의 재미를 느낀다는 건 이런 거구나 싶다.
(근데 사실 라이프 사이클 이해가 좀 잘 안돼서 zerocho님 리액트 라이프 사이클 게시물 정독하고 왔다...^^