[React] 시작해보기😎

: ) YOUNG·2021년 5월 11일

React

React 기초

목록 보기

2/4

궁금하신 점이나 고칠 부분이 있다면 언제든지 댓글 남겨주세요!

🔨워크스페이스 생성

터미널 명령어 입력

먼저 VScode에서 터미널창을 열어서 원하는 위치에 파일을 만들도록 하자.

cd <원하는 위치 입력> ex>C:\Users\Where\Desktop\React 형식
npx create-react-app <프로젝트이름>

를 입력하고 나면 프로젝트 생성이 시작된다.
대충 이런 화면이 나오면 성공!

Hello, World 출력해보기

생성이 완료되었다면 이제 뭔가를 출력해봅시다.

src폴더에 components 폴더를 만들어주자

components 폴더에 Hello.js 파일을 생성해주자
이제 빈화면이 생성되어서 여기서 코드를 입력해보자

Hello.js

import React, { Component } from "react";

export default class Hello extends Component {
  render() {
    return (
        <h1>Hello, World</h1>
    );
  }
}

이제 이렇게 되면 Hello, World를 출력할수 있을까?
결과를 볼려면 다시 터미널에서 명령어를 입력하여 실행시켜보자

npm start
터미널에 위의 명령어를 입력하면 시작된다.

이렇게 되면 시작이 된건 맞는데 Hello, World는 나오지 않는다.
다시코드를 수정해보자

App.js 파일로 이동해보면 아래의 코드가 보일텐데

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;

이파일을 수정해주면 된다.
우리가 실행시켜서 보이는 화면은 App.js가 보여준다고 생각하면 돼기 때문에 만들어준 Hello.js파일을 여기서 보여줄수 있도록 해주는 것이다.

깔끔하게 return 내의 문장을 모두 제거해주자

App.js

import Hello from "./components/Hello";
import "./App.css";

function App() {
  return <Hello />;
}

export default App;

아래의 코드로 수정을 한뒤 결과를 확인해보자

title을 이용해서 출력해보기📇

이번에는 App.js에서 title 값을 이용해서 똑같이 Hello, World를 출력해보자

어렵지 않다 위에서 손봤던 App.js의 Hello태그에 title옵션 설정후 Hello.js를 조금만 손봐주면 된다.

App.js

import Hello from "./components/Hello";
import "./App.css";

function App() {
  return <Hello title="Hello, World!" />;
}

export default App;

이제 이렇게 되면 App.js는 완성이 된거고,
Hello.js로 넘어가보자

Hello.js

import React, { Component } from "react";

export default class Hello extends Component {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
      </div>
    );
  }
}

<div> 안에 <h1>을 달아주고 여기서 {this.props.title}을 추가해주면된다.

아, 참고로 React에서 태그를 2개 사용할 때, 꼭 부모태그가 필요하다
무슨 말인가 하면.. 가령 예를 들어

위의 사진처럼 코드를 작성할 경우 오류가 발생하니 👌꼭 부모 태그를 작성해주자!(2개이상의 태그를 사용할때만! 1개는 ㄱㅊ)

여기서 {}(중괄호)는 JSX라는 React에서 사용되는 문법이다.
먼저 props는 변하지 않는 데이터를 다룰때 사용되는데 부모컴포넌트에서 자식컴포넌트로 전달할때, props가 사용된다.
쉽게 해석하자면 this 자기자신의 props 데이터전달 title title값
뭐 이런식으로 연결된다고 보면 쉽다.

또한 this의 개념이 조금 복잡한데 간단하게 설명하자면
함수 밖에서는 this는 전역 객체를 의미하고
함수 내에서의 this는 호출에 따라 다른데 위의 코드 같은 경우는
우리가 바인딩 시켜놓은 props의 title값이 나오도록 되어 있다

(추가적인 부분은 개념에서 추가하도록 하겠습니다.<아직 나도 개념이 약하기 때문에..>)

이제 이렇게 적용된 코드의 결과는..