[시작화면] 우정테스트 사이트 만들기(Feat.리액트)

클래스형 컴포넌트를 활용해서 우정테스트 시작화면(Start.js)를 만들어보자

1. 리액트 프로젝트 생성

   

혹시라도 터미널에서 "npm install N/A" 라는 오류가 발생한다면 우리가 사용하고자하는 버전을 사용한다고 명령어 입력해주면된다.

→ npm use 12.18.4

 

그럼 본격적으로 터미널에서 리액트 프로젝트를 생성해보고 시작해보자.

 

yarn create react-app [프로젝트명]

생성된 프로젝트 이동하기 : cd [프로젝트명]

 

※ [] 은 구분하기위한 정보이며, 실제로 터미널에 입력하면안된다.

 

이제 이동한 후, 생성된 프로젝트가 잘 동작하는지 확인해보자!

yarn start

 

 

2. 화면구성 

컴포넌트를 쪼개서 만들어보기위해 기존에 App.js에서 시작화면 Start.js를 불러와서 사용해보자.

 

함수형컴포넌트 와 클래스형 컴포넌트 모두 사용해보기위해서 

App.js 는 클래스형 컴포넌트로

Start.js는 함수형 컴포넌트로 기본뼈대로 삼아서 만들어보자.

→ 시작페이지를 만들때 주요하게 담겨지는 내용들(사진, 문구, 인풋박스, 버튼 등)을 담을 컴포넌트 

 

3. 컴포넌트 기본뼈대를 복습하고 넘어가자!

Start.js (함수형 컴포넌트) 

import React from "react"; const Start = (props) => {       return null; } export default Start;

App.js(클래스형 컴포넌트)

import React from "react"; class App extends React.Component {       constructor(props) {       super(props);             this.state={        null       }    }    render() {       return (    ); } export default App;

App.js에서 Start.js를 가져와서 사용하기위해서는 임포트해주는걸 잊지말자.

import Start from "./Start";

 

또한, 임포트해줌과 동시에 리턴안에 <Start/> 넣어줘야한다.

 

4. 시작화면 뷰 만들기

 - 감싸는 영역 <div></div>

 - 이미지 <img/>

 - 제목 <h1></h1>

 - 인풋박스(텍스트) <input type="text"/>

 - 버튼 <button></button>

이런식으로 필요한 요소들을 가지고 와서 코드를 작성하고나서 sytled-components를 통해서 css로 정리를 해보자.

 

5. 코드 작성 시 필요한 내용들! 

- 이미지파일은 src폴더에 원하는 이미지를 넣어놓고 임포트 해오면된다! 

   import img from "./[파일명]";

 

   임포트해온 이미지파일을 리턴해주는 값으로 보여주면 끝! 

   <img src={img}/>

 

- 제목에 들어가있는 이름을 App.js에 state에 넣어놓고 props로 가져와보자!

 

App.js  class App extends React.Component{ constructor(props){ super(props); this.state = {         name: "손흥민" }; } // state에 넘겨줄 name 값을 넣어두고 // 아래와같이 name값을 Start.js에 넘겨주자. render () { return ( <div className="App">    <Start name={this.state.name}/> </div> ); } } //이렇게 넘겨준 값은 Start.js에 props에 들어있다! Start.js <h1>나는 {props.name}에 대해 얼마나 알고 있을까?</h1>

 

그리고 화면과 비슷하게 CSS는 자유롭게 작성을 해보자!

인라인으로 작성해도되고 styled-components를 활용해도 좋을 것 같다. 이것저것 해보는게 가장 좋은 것 같다. (이해를 위해)