React 기초 개념

# 이 글은 책 "Do it! 클론 코딩 영화 평점 웹서비스"를 바탕으로 쓴 글입니다.

 

웹 계획표에도 써 놓았듯이 실전으로 부딪혀 보자는 마인드로 구글링을 해보니

 

클론 코딩이란 좋은 방법이 있었다.

 

그렇기에 강의, 책을 찾아보던 중 이 책을 찾게 되었고, 망설임 없이 바로 서점으로 가서 샀다.

 

JavaScript를 얕게 공부한 나로써는 힘들 수 있겠지만 일단 해보고 어떤 걸 더 공부해야 할지 방향을 잡을 예정이다.

 

근데 일단 JS가 문제가 아니고 갑자기 React 가 나오네..?

 

원래는 클론 코딩은 git hub만 남길려고 했지만 그래도 새로운 것에 발을 담구는 과정이므로 포스팅도 남겨놓으려 한다.

(모든 과정을 남기진 않겠지만 필요한 부분은 남겨볼 예정)

 

그럼 이제 제목처럼 React 기초 개념에 대해 알아보자.

 

 

1. 리액트 앱 실행

 

앞에서 이미 git hub에서 파일을 받아오고, git hub에 올리는 부분까지는 진행했다.

 

 

이제 React 앱을 실행해보자.

 

먼저 command에 들어가 루트 폴더를 찾아 react를 실행해야 한다.

 

Command를 사용해 본 적이 별로 없는 나는 이런 부분들도 굉장히 굉장히 낯설지만 일단 따라 해 본다.

 

루트 폴더로 이동해 npm start를 치면!

 

두둥!!

 

 

나의 첫 React 화면이다!!!

 

뭔가 신나기도 하지만 불안하기도 하다.. 

 

이제 React를 실행할 수 있으니 React에 대해서 알아보자.

 

 

2. 컴포넌트

 

 

책에 나와 있는 그림인데 이게 너무 잘 설명되어 있는 것 같아서 가져왔다.

 

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <App />,
  document.getElementById('root')
);

 

위와 같은 코드를 보자.

 

import App from './App'; 이란 코드가 App 컴포넌트를 import 해서 사용하는 것이고, <App/> 이 컴포넌트의 표현 방법이다.

 

정리해보자면

App 컴포넌트가 반환하는 것을 ReactDOM.render()란 함수가 index.html의 'root'란 엘리먼트에 그려준다! 

 

 

 

2. JSX

 

JSX는 HTML과 JavaScript를 조합한 것이다.

 

ko.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

여기 아주 아주 잘 설명되어있다.

 

이제 컴포넌트를 만들어 보자.

 

컴포넌트를 작성할 때에는 중요한 규칙은 이름을 대문자로 시작해야 한다.

 

먼저 Potato란 컴포넌트를 만들기 위해 Potato.js 파일을 생성한다.

 

그리고 Potato 컴포넌트를 생성한다.

 

import React from 'react';

function Potato(){
    return <h3>I Love Poatao!</h3>;  // 이 코드는 HTML이 아니라 JSX 이다!
}

export default Potato;  // 다른 파일에서 Potato 컴포넌트 사용 가능!

 

이제 index.html로 가서 Potato를 사용해보자.

 

먼저 중요한 점은 리엑트에서는 최종으로 단 한 개의 컴포넌트를 그려야 한다.

 

그렇기에 이미 있던 <App /> 컴포넌트와 같이 사용하기 위해서는 App 컴포넌트에 Potato 컴포넌트를 import 해야 한다.

 

import React from 'react';
import Potato from './Potato'; 
// './' 는 같은 경로를 의미! 

function App() {
  return (
    <div>
      <h1>HELLO!!!!!!!!</h1>
      <Potato/> // Potato 컴포넌트 삽입
    </div>
  );
}

export default App;

 

이렇게 App 컴포넌트에 Potato 컴포넌트를 삽입 후 React를 실행시키면 

 

짜잔!

 

정상적으로 출력된다.

 

굳이 다른 파일로 컴포넌트를 만들지 않아도 다음과 같이 한 파일 안에 여러 컴포넌트를 생성 가능하다.

import React from 'react';

function Potato(){
  return <h3>I Love Poatao!</h3>;  // 이 코드는 HTML이 아니라 JSX 이다!
}

function App() {
  return (
    <div>
      <h1>HELLO!!!!!!!!</h1>
      <Potato/>
    </div>
  );
}

export default App;

 

신기한 점을 발견했다.

 

이렇게 Visual Code에서 고치고만 있어도 자동으로 React App에서 변동사항을 감지하고 계속 갱신된다!

 

 

3. Props

 

이렇게 여러 개의 컴포넌트를 사용하려면 컴포넌트와 컴포넌트를 이어주는 역할도 필요할 것이다.

 

Props가 바로 그 역할이다.

 

Props는 컴포넌트로 넘어가는 매개 변수이다.

 

import React from 'react';

function Food(props){
  console.log(props); // props 출력
  return <h3>This food is "{props.name}" and this cost {props.cost}$.</h3>;  // 이 코드는 HTML이 아니라 JSX 이다!
}


function App() {
  return (
    <div>
      <h1>HELLO!!!!!!!!</h1>
      <Food name = "라면" cost = {3}/>
      <Food name = "캐비어" cost = {40}/>
      <Food name = "BBQ 황올" cost = {10}/>
    </div>
  );
}

export default App;

 

바로 코드로 보자.

 

뭐.. 어려운 부분은 딱히 없지만 사용하는 방법들은 알아놓을 필요가 있어 보인다.

 

주의할 점은 props를 생성할 때 문자열인 경우를 제외하곤 반드시 중괄호로 값을 감싸야한다.

 

황올은.. 사랑입니다.

 

이렇게 컴포넌트부터 시작하여 영화 웹을 완성시키는 것이다.

 

어쨌든 이렇게 React에 발을 들여 보았다!