강의들으면서 스타일 넣어주기까지 따라해보기

스파르타 코딩클럽 리액트 강의 따라하며 프로젝트 만들기!

vscode 터미널을 연다.

(필요시)사용할 nvm버전을 지정해준다
nvm use 12.18.4

프로젝트 생성

yarn create react-app [프로젝트 이름]

만든 프로젝트 폴더 안으로 이동 후 시작!

cd [폴더(프로젝트)이름]
yarn start

app.js파일을 클래스형 컴포넌트로 변경해보기

함수형 컴포넌트
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

클래스형(이 파일을 쓸 예정)
import React from "react";
import logo from './logo.svg';
import './App.css';

import Start from "./Start";

class App extends React.Component{
  constructor(props){
    super(props);

    this.state = {};
  }

  render () {
    return (
      <div className="App">
        <Start/>
      </div>
    );
  }
}

export default App;

컴포넌트 파일 틀 잡기

import React from "react";
import img from "./[파일이름].png"; //이미지 불러오기1

const Start = (props) => {

    return (
        <div>
            <img src={img}/> //이미지 불러오기2
            <h1>나는 너에대해 얼마나 알고있을까?</h1>
            <input type="text"/>
            <button>시작하기</button>
        </div>
    )
}

export default Start;

여기까지 완료!

꿀팁

1. '너'라는 단어를 app.js의 state안에 넣어놓고 props로 가져 와보기

1. app.js파일
import React from "react";
import logo from './logo.svg';
import './App.css';

import Start from "./Start";

class App extends React.Component{
  constructor(props){
    super(props);

    this.state = {
      name: "너" //이부분 추가
    };
  }

  render () {
    return (
      <div className="App">
        <Start name={this.state.name}/> //이부분 추가
      </div>
    );
  }
}

export default App;

2. 컴포넌트 파일
import React from "react";
import img from "./jiyoung.png";

const Start = (props) => {

    return (
        <div>
            <img src={img}/>
            <h1>나는 {props.name}에대해 얼마나 알고있을까?</h1> //이 부분 변경
            <input type="text"/>
            <button>시작하기</button>
        </div>
    )
}

export default Start;

이렇게 해주면 이름 변경이 필요할 시 app.js파일의

    this.state = {
      name: "제나"
    };

이 부분만 바꿔주면 돼서 아주 유용하다.

이제 스타일 꾸미기

app.css파일 생성 후
컴포넌트 파일에서 div classname을 붙여준다.

import React from "react";
import img from "./jiyoung.png";

const Start = (props) => {

    return (
        <div className="main">
            <img className="main_s" src={img}/>
            <h1>나는 {props.name}에대해 얼마나 알고있을까?</h1>
            <input className="text-box" type="text"/>
            <button className="btn">시작하기</button>
        </div>
    )
}

export default Start;

CSS전체 코드

.container{
  display: flex;
  height: 100vh;
  width: 100vw;
  /* 사이즈를 넘치면 그냥 hide */
  /* overflow: hidden;  */
  padding: 16px;
  box-sizing: border-box;
}

.main{
  display: flex;
  /* 가로세로 가운데 정렬 */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid #eee;
  /* max-width: 400px; */
  width: 800px;
  height: 100vh;
  padding: 15vh 15px;
  box-sizing: border-box;
  margin: 0px auto;
}

.main h1 {
  text-align: center;
  font-size: 1.5em;
  margin: 0;
  line-height: 1.4;
}

.main_s {
  width: 50%;
  margin: 16px;
}

.text-box {
  padding: 10px;
  margin: 24px 0px;
  border: 1px solid pink;
  border-radius: 30px;
  width: 80%;
}

.btn {
  padding: 8px 24px;
  background-color: pink;
  border-radius: 30px;
  border: pink;
}

placeholder 삽입하기

//아주 간단하게 placeholder넣어주면된다.
<input className="text-box" type="text" placeholder="내 이름"/>

한 단어만 테두리 색 넣어주기

// span태그를이용해서
<h1>나는 <span>{props.name}</span>에대해 얼마나 알고있을까?</h1>
// css파일에서 스타일 넣어주면 된다.
.main h1 span {
  background-color: yellow;
  padding: 5px 10px;
  border-radius: 30px;
}

그치만 별로 안 어울린다 빼줘야지ㅎㅎ

완료!
전체 코드
App.js코드

import React from "react";
import logo from './logo.svg';
import './App.css';

import Start from "./Start";

class App extends React.Component{
  constructor(props){
    super(props);

    this.state = {
      name: "너"
    };
  }

  render () {
    return (
      <div className="App">
        <Start name={this.state.name}/>
      </div>
    );
  }
}

export default App;

App.css코드

.container{
  display: flex;
  height: 100vh;
  width: 100vw;
  /* 사이즈를 넘치면 그냥 hide */
  /* overflow: hidden;  */
  padding: 16px;
  box-sizing: border-box;
}

.main{
  display: flex;
  /* 가로세로 가운데 정렬 */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid #eee;
  /* max-width: 400px; */
  width: 800px;
  height: 100vh;
  padding: 15vh 15px;
  box-sizing: border-box;
  margin: 0px auto;
}

.main h1 {
  text-align: center;
  font-size: 1.5em;
  margin: 0;
  line-height: 1.4;
}
/* 
.main h1 span {
  background-color: yellow;
  padding: 5px 10px;
  border-radius: 30px;
} */

.main_s {
  width: 50%;
  margin: 16px;
}

.text-box {
  padding: 10px;
  margin: 24px 0px;
  border: 1px solid pink;
  border-radius: 30px;
  width: 80%;
}

.btn {
  padding: 8px 24px;
  background-color: pink;
  border-radius: 30px;
  border: pink;
}

Start.js코드

import React from "react";
import img from "./jiyoung.png";

const Start = (props) => {

    return (
        <div className="container"> 
            {/* //div로 감싸준다. 아우터 박스 만들기위해 */}
            <div className="main">
                <img className="main_s" src={img}/>
                <h1>나는 <span>{props.name}</span>에대해 얼마나 알고있을까?</h1>
                <input className="text-box" type="text" placeholder="내 이름"/>
                <button className="btn">시작하기</button>
            </div>
        </div>
    )
}

export default Start;

html과 css만 만질때보다 확실히 복잡해진게 많은 것같아 똑같은 강의 계속 돌려보고 돌려보고있다. 정말이지.. 그래도 재밌어서 다행이다🤤😅 올해 8월까지 생각하고있는 사이드 프로젝트로 14년지기 생일 선물로 그녀의(?) 웹사이트를 만들어주려는데 이 강의 내용도 잘 활용 할 수있을것같다😆🎉