[블로깅 챌린지] 리액트로 간단한 컴포넌트 구현하기

블로깅 챌린지 3주차가 다가왔다 ! 사실 코드스테이츠를 수강하면서 처음부터 프로젝트를 구현해본적은 없던 것 같다. 항상 짜여진 틀에 알맞은 코드를 작성해 테스트케이스를 통과하는 것이 끝이었다. 그래서 막상 처음부터 리액트로 코드를 짤 수 있을까 ? 하는 생각이 들었던 것 같다. 그래서 이번 블로깅 챌린지 주제로는 '리액트로 간단한 컴포넌트를 구현하기'로 정했다. 

 

리액트를 사용하기 위해선 node.js 가 필요하고 node.js 설치를 완료 하였으면 npm을 이용하여 자바스크립트 라이브러리를 관리할 수 있다. 나는 실습을 통해 node.js를 설치하였으므로 여기까지는 성공적이다. 

 

리액트 앱 생성하기 

 

리액트가 제공하는 create-react-app을 활용하여 리액트 프로젝트를 생성할 수 있다. 터미널에 간단하게 아래와 같은 명령만 입력하면 리액트  프로젝트가 생성된다. 

npx create-react-app [폴더명]

(여기서 npx에 대해 간단하게 찾아본 결과 자바스크립트 패키지 관리 모듈인 npm의 5.2.0 버전부터 새로 추가된 도구로 npm 에서 제공해주는 하나의 도구라고 생각하면 된다. npm 5.20 이상 버전이면 사용할 수 있다. )

 

설치가 완료가 되면  내가 만든 폴더명으로 폴더가 하나 생성되는데 이 폴더로 작업위치를 옮겨주어야 실행이 된다. 초기에 생성된 폴더로 이동하지 않고 왜 오류가 뜨지 !! 했던 기억이있다. 따라서 터미널에 아래와 같은 명령어로 작업 위치를 변경해준다. 

cd [폴더명]

그 후 프로젝트를 실행하고 싶다면 npm start 명령어를 통해 시작해주면 된다 ! 

 

위와 같은 결과를 볼 수 있다면 성공적으로 서버가 실행되고 있다는 것이다. 

 

이제 서버도 잘 실행되고 있으니 간단한 컴포넌트를 구현해 볼 것이다. 

 

 

컴포넌트 생성하기 

src 폴더 아래 Button.js 파일을 생성해준다. 컴포넌트는 무조건 대문자로 시작해야한다. 

Button 컴포넌트를 export 해주어야 다른 컴포넌트에서 사용할 수 있다. 현재 App.js 가 가장 최상위에 있기 때문에 App.js 에서 사용해주기 위해 Button을 내보내주었다. 

Button.js

import React from "react";

function Button() {
    return (
      <button>hello</button>
    );
  }
  
  export default Button;

App.js

import './App.css';
import Button from './Button';
function App() {
  return (
    <>
    <Button/>
    </>
  );
}

export default App;

App.js에서 생성한 Button 컴포넌트를 사용하기 위해 import Button from [Button컴포넌트의 경로] 를 작성해주었다. 

 

정상적으로 결과가 출력되었다 ! 

 

이제 나는 useState() 를 활용하여 버튼을 클릭했을 때 화면에 있는 숫자가 증가하도록 만들어보았다. 

 

import React from "react";
import {useState} from "react";

function Button() {

    const [number, plusNumber] =useState(0);  

    const buttonClick =() => {
        plusNumber(number+1);
    }
    return (
    <>
      <div>버튼을 클릭하면 숫자가 증가합니다!</div>
      <button onClick={buttonClick}> + </button>
      <div>{number}</div>
    </>
    );
  }
  
  export default Button;

아주 잘 작동된다 ! 

 

결과물 

 

플러스 버튼 클릭시 숫자가 올라감

 

오늘은 이렇게 간단하게 리액트 프로젝트를 만들고 간단하게 컴포넌트까지 구현해보았다. 

사실 이 주제를 정했을 때에는 모달, 탭 등을 구현해보려고 했는데 아직 혼자서는 잘 안되는 것 같다.. ! 좀 더 공부해서 다음 포스트에는 더 복잡한 기능이 들어간 컴포넌트를 만들어 볼것이다 !