[React] 프로젝트 제작부터 간단한 작업을 통한 이해

본 글은 Youtube 코딩애플님의 강좌를 재구성하였으며, 강의 내용을 정리한 글입니다. 

https://www.youtube.com/watch?v=LclObYwGj90&list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy

본 내용은 Node 의 설치, VSCode 설치를 가정한다.

 

React JS프로젝트 시작

 

- Visual Studio Code에서 폴더를 만들어 연다

- 터미널은 Powershell

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

하고, 필요할 때 y 타이핑하면 리액트 프로젝트에 필요한 파일들을 자동으로 다운받아 준다. 

 

자동으로 다운받아진 파일은 리액트 라이브러리인 node_modules, img파일 등 static 파일을 모아 놓은 폴더인 public 폴더, 우리가 작성한 소스코드를 담은 폴더인 src 폴더, 라이브러리의 버전을 담은 package.json파일이 있다. 

 

기본 React 작동 구조는 public 안에 있는 index.html 파일이 원래 우리가 아는 html 파일이다. src 안 html.js 파일에서 app.js 안에 있는 jsx 파일을 index.html 파일로 변환시켜서 넣어준다.

 

즉, 우리가 작성해야할 파일은 app.js안에 jsx형식으로 코딩하면 된다.

 

html 방식이 아닌 jsx 방식으로 코딩은 어떤게 다른것인가?

 

1. className = "[클래스명]" 방식으로 class이름을 지정해준다.

<div className='modal'>
     <h2>제목</h2>
     <p>날짜</p> 
     <p>상세내용</p>
</div>

2. 데이터 바인딩이 JS에 비해 쉽다.

DOM을 이용하여 서버의 데이터를 받아 온 뒤 데이터 정보를 이용하는 것 보다, {}를 통해 손쉽게 이용할 수 있다.  {} 안에는 변수명, 함수, 클래스 등 생각하는 것들이 다 들어갈 수 있다.

function App() {
  let myName = '최우혁'
  function re100(){
  return 100
  }
  return (
    <div className="App">
      <p> 안녕하세요 저는 {myName}</p>
      <p> {re100()}</p>
    </div>
  );
}

3. src, id, href 등 속성에 {} 를 이용한 object 자료형으로 속성을 넣어야 함

<img src={logo}>

4. style 또한 object 자료형으로 넣어야함 

<div style = {{color : 'blue', fontSize : '30px'}}>
</div>

css 속성 font-size 는 js 언어상 -를 뺄셈으로 인식해서 camelCase 작명에 따라 fontSize로 대체함

 

데이터의 저장방식은 2가지로 나뉜다.

 

1. 변수에 넣기

2. state 방식 이용하기 

변수에 들어간 내용이 바뀌면, 자동으로 재렌더링이 되지 않는 반면에, state 방식으로 이용하면 내용이 바뀌면 자동으로 재렌더링이 된다. 

따라서 자주 사용하거나, 자주 바뀌는 데이터는 state 방식을 통하여 저장하자

 

state 방식 사용방법

 

import React, {useState} from 'react';
import './App.css';

function App() {
  let [글제목,글제목변경] = useState(['남자 코트 추천','강남 우동 맛집','파이썬독학']);
  let [따봉, 따봉변경] = useState(0);
  
  function 제목바꾸기(){
    var newArray = [...글제목]; 
    newArray[0] = '여자 코트 추천';
    글제목변경(newArray);
  }
  
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      
      <div className="list">
        <h3>{글제목[0]} <span onClick={()=>{따봉변경(따봉 + 1)}}>👍</span>{따봉}</h3>
        <p>7월 4일 발행</p><button onClick={제목바꾸기}>Click me!</button>
        <hr/>
      </div>

      <div className="list">
        <h3>{글제목[1]}</h3>
        <p>7월 14일 발행</p>
        <hr/>
      </div>
      
      <div className="list">
        <h3>{글제목[2]}</h3>
        <p>7월 24일 발행</p>
        <hr/>
      </div>
      <Modal></Modal>
    </div>
  );
}

function Modal(){
  return(
    <div>
      <div className='modal'>
        <h2>제목</h2>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
    </div>
  )
}
export default App;

1. 1번줄의 문장과 같이 입력해준다

- react 라이브러리에서 useState를 import 해옴을 수행

 

2. 5,6번줄과 같이 입력

-let [상태,상태변경함수] = useState(초기값);

글제목에 초기값이 입력되고, 이 값을 변경하려면 

상태변경함수(10), 상태변경함수([10,20,30]) 과 같이 초기값의 자료형에 맞는 데이터를 입력해 주면 된다. 

또는 21번째 줄과 같이, 현재 상태값에다가 1을 더해주는 형식도 가능하다.

또, 8~12번째 줄과 같이, 리스트 상태값을 deepcopy통하여 변경하는 방식도 가능하다. 모르면 외우자

 

웹페이지를 만들다 보면 반복되는 HTML 구문이나, 재렌더링이 자주일어나는 부분, 하나의 구역을 Component로 관리하여 처음 보는사람도 구조를 알기 쉽게 만들 수 있다.

 

Component는 사용법

1. component의 이름의 첫글자는 대문자

2. 37, 42~57 번째 줄을 참고

 

이런 Component도 State 방식을 이용하면 데이터를 전달받는데 복잡해진다. 상위 Component에서 하위 Component로 데이터를 전달하는 방식인 Props 방식이 있다.