🎈React 스터디 시작!

코딩 애플(https://online.codingapple.com/) 의 '리액트 기초부터 쇼핑몰 프로젝트까지!' 강좌를 수강하면서 작성한 내용임

React를 사용하는 이유?

짧고 간결한 코드로 web-app을 만들기 위해

그렇다면 왜 web-app을 사용하는가?

새로고침 없이 웹 탐색이 가능하다.
모바일 앱과 비슷한 사용감을 가진다.
즉 UX가 뛰어나서 좋은 사용자 경험을 제공하고 HTML 관리가 편함

React 작업 환경 설정

1. Node.js 설치하기 (https://nodejs.org/)
   

creat-react-app 라이브러리를 비롯한 많은 라이브러리를 이용하기 위해 설치

사실 생활코딩 node.js 강의에서는 옆에 LTS 버전을 설치하라고 해서 이미 그렇게 했는데 코딩애플에서는 current 버전을 설치하라고 하시네 뭐가 다른건지 모르겠지만 일단 넘어감

2. 터미널에 > npx create-react-app [프로젝트명]

npx create-react-app blog

blog라는 프로젝트 생성

3. VSCode에서 프로젝트 폴더를 열고 터미널에 > npm start

npm start: package.json의 scripts에 있는 start 명령어를 실행하는 부분

JSX 사용하기

프로젝트 폴더 > src > App.js 파일 내
함수 App()의 return 괄호 안에 JSX를 이용해 코딩한다.

JSX란?
JavaScript eXtension.
기존 자바스크립트의 확장문법
React가 JS보다 편리한 이유: 데이터 바인딩을 쉽게 할 수 있음. 즉, 자바스크립트 데이터를 HTML에 손쉽게 꽂아넣을 수 있다.

1. div에 class를 지정해주고 싶으면 className을 사용해야함

function App(){
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
    </div>
  )
}

자바스크립트에서 class를 예약어로 사용하기 때문에 충돌을 막기 위함

2. 데이터바인딩하기

핵심은 { 중괄호 }를 사용하는것!

  function App(){

    var data = '안녕하세요';
    return (
      <div className="App">
        <div className="black-nav">
          <div>개발 blog</div>
          <div>{ data }</div>
        </div>
      </div>
    )
  }

만약 이전의 자바스크립트 문법으로 데이터를 불러오려면

document.getElementById().innerHTML = ??

이렇게 길고 긴 코드가 필요하다.

변수명 뿐만 아니라, 함수명도 넣을 수 있음.
다른 여러 HTML 속성들에도 데이터바인딩이 가능하다.

function App(){

  var data = 'nav';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
        <div className={data}>안녕하세요</div>
      </div>
    </div>
  )
}

//클래스명을 **nav**로 지정한 것

3. HTML에 스타일 직접 넣기(inline style)

무조건 { 오브젝트 }로 바꾸어서 넣어야함

<div style={ 스타일용 오브젝트 }> 글씨 </div>
<div style={ {color : 'blue', fontSize : '30px'} }> 글씨 </div>

여기서 또 주의할점!
속성명에는 -(대쉬)기호를 쓸 수 없음. 역시 자바스크립트 문법 -(뺄셈)와 충돌할 수 있기 때문이다. 모든 단어를 붙여쓰되, 앞글자를 대문자로 바꾸는 Camel표기법을 사용함.

State 사용하기

데이터바인딩과 관련된 중요한 데이터를 저장할 때는 변수 대신 state를 사용한다.

그러니까, let이나 var 말고도 state를 사용하자는 뜻

1. 먼저, 코드 맨 위에 { useState }를 추가해준다.

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

function App() {
  let [title, change] = useState('남자 코트 추천');
  let posts = '강남 고기 맛집';

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <div className = "list">
        <h3>{ posts }</h3>
        <p>7월 2일 발행</p>
        <hr/>
      </div>
      
    </div>
  );
}

2. useState 함수 문법

let [a, b] = useState();
a: 데이터
b: 데이터를 변경시키는 함수

이는 ES6 destructing 문법을 사용한 것이다.

destructing
let [a, b] = [dataA, dataB]
dataA는 변수 a에, dataB는 변수 b에 저장됨

3. 데이터바인딩에 적용하는 법

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

function App() {
  let [title, change] = useState('남자 코트 추천');
  let posts = '강남 고기 맛집';

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <div className = "list">
        <h3>{ title }</h3>
        <p>7월 2일 발행</p>
        <hr/>
      </div>
      
    </div>
  );
}

h3 태그 안에 posts 대신 title을 써주면 제목이 바뀌게 된다.

많은 자료를 한번에 저장하고 싶다면 Array나 Object 자료형을 넣어도 된다.

function App() {
  let [title, change] = useState('남자 코트 추천', '여자 코트 추천');
  let posts = '강남 고기 맛집';

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <div className = "list">
        <h3>{ title[0] }</h3>
        <p>7월 2일 발행</p>
        <hr/>
      </div>
      <div className = "list">
        <h3>{ title[1] }</h3>
        <p>7월 2일 발행</p>
        <hr/>
      </div>
      
    </div>
  );
}

도대체 왜 state를 쓰는걸까?

이는 웹앱의 핵심 기능과도 관련이 있는데,
변수가 변경될 때 자동으로 관련 HTML을 재렌더링 할 수 있기 때문이다.
새로고침 없이도 수정사항을 자동으로 업데이트 가능하다는 뜻!
고로 자주 바뀌는 중요한 데이터들을 state로 저장할 것