![다시 시작하는 리액트 - 리액트 실무 기초 2 과제](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FRYQOw%2Fbtr6yawEyei%2FNhvTePBEuxc2VfvpN6xju1%2Fimg.png)
![](https://blog.kakaocdn.net/dn/RYQOw/btr6yawEyei/NhvTePBEuxc2VfvpN6xju1/img.png)
아래 기획서를 보고, 퀴즈 시작하기 화면을 만들어보세요!
<App/> 아래에 <Start/>라는 자식 컴포넌트를 만들어서 해봅시다!
→ 숙제할 때는 꼭꼭 클래스형 컴포넌트를 쓸 필요 없어요! (해설 코드는 함수형 컴포넌트로 나갑니다.)
우리가 배운 내용으로 위 페이지를 만들어봅시다.
이미지도 넣어보고, 내 친구가 이름을 넣을 텍스트 입력 인풋과 시작하기 버튼을 만들어요.
[나는 {} 에 대해서...]부분에 {}는 state에 넣고 prop로 넘겨서 해보세요!
- 기획서(레이아웃) 보기
![](https://blog.kakaocdn.net/dn/brZ4QH/btr6A08oU6D/eyhd2smYWGytkigdAyhbtk/img.png)
- 내 과제물
다 하고나서 생각해보니까 난 prop으로 넘기지 않았다 ㅋ ㅋ ㅋ ㅋ ㅋ ㅋ...
App.js에서 useState를 만들어두고 prop하는게 인상적이지만 그냥 Start component에서 모든걸 해결했다...:)
근데 과제 리뷰를 보니 useState에 initialState 값만 집어넣어 놓고 값 변형은 전혀 하지 않았다.
이럴 거면 input창 왜 만들어 놓은거지? 난 이것도 모르고 input에 들어오는 value값으로 변형되게끔 해뒀다.
(사실 내 공부 됐으니까 상관 없다)
![](https://blog.kakaocdn.net/dn/c2H18m/btr6A1F81MY/0KK2iEHg4j6U7kHB0MyFs0/img.png)
![](https://blog.kakaocdn.net/dn/blzKYb/btr6BTOoYVQ/ovtC4N6Mz9gfnKO05Vuyb1/img.png)
- 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님 리액트 라이프 사이클 게시물 정독하고 왔다...^^
![](https://t1.daumcdn.net/keditor/emoticon/friends1/large/014.gif)
'(심층)리액트' 카테고리의 다른 글
다시 시작하는 리액트 - 리액트 실무 기초 3 Quiz (1) | 2023.03.30 |
---|---|
다시 시작하는 리액트 - 리액트 실무 기초 3 (0) | 2023.03.29 |
다시 시작하는 리액트 - 리액트 실무 기초 2 (0) | 2023.03.27 |
(심층)리액트트위터 클론코딩(with firebase) - 06 (0) | 2023.02.18 |
트위터 클론코딩(with firebase) - 05 (1) | 2023.02.14 |
github : https://github.com/dnjfht
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!