리액트 1편

리액트 React 설치와 개발환경 셋팅 (2021 ver)

리액트로 웹을 만들기 위해선 개발환경 셋팅이 필요

Nodejs, Vs Code(에디터는 취향)

VSCode 에디터에서 terminal을 열어줍니다

terminal > npx create-react-app .(혹은 폴더명)

npm run start(실행 명령문)

-본격적으로 React 시작-

JSX를 이용하자

리액트에선 HTML 대신 이용하는 JSX 문법을 사용해야 합니다. HTML과 유사하지만 유의점이 몇개 있습니다.

function App(){

  var data = '안녕하세요';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
        <div>리액트 레츠고</div>
      </div>
    </div>
  )
}

HTML에 스타일을 직접 넣는 방법

<div style={ 스타일용 오브젝트 }> 글씨 </div>

JSX 상에서는 무조건 {} 오브젝트로 바꿔서 넣으셔야합니다.

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

• { 속성명 : '속성값' } 이렇게 넣으시면 됩니다.

• 근데 속성명에 - (대쉬)기호를 쓸 수 없습니다. 대쉬기호 대신 모든 단어를 붙여써야합니다. 붙여쓸 땐 앞글자를 대문자로 치환해야합니다.

중요한 데이터는 변수말고 리액트 state로

리액트에서도 변수를 자유롭게 만들고 변수에 데이터 아무렇게나 저장해서 사용은 가능하지만 데이터바인딩과 관련된 중요한 데이터를 저장할 땐 변수 대신 state를 만들어 사용합니다.

useState()라는 함수는 state를 하나 만들어주는 함수입니다.
useState()를 사용하기 위해선 상단에

import React, { useState } from 'react';

작성하여 useState를 가져옵니다.
useState(저장할 데이터) 배열, 문자, 숫자 등등 기입 가능
useState()를 쓰면 데이터가 두개 남습니다. [데이터1, 데이터2] 이렇게 생긴 array가 남습니다.
이걸 각각 a와 b라는 변수명으로 ES6 destructuring 문법을 이용해 저장해서 쓰시면 됩니다.

a라는 변수엔 실제 저장할 데이터가 들어있고

b라는 변수엔 저장할 데이터를 변경시킬 함수가 들어있습니다.

Q. destructuring 문법이 뭔데요?

내가 array 안에 있는 데이터들을 변수로 쉽게 저장하고 싶으면 쓰는 신문법입니다.

['Kim', 20] 이라는 array 자료형에서 Kim이랑 20이라는 자료를 각각 변수에 저장하고 싶으면 어떻게 합니까.

var array = ['Kim', 20];

var name = array[0];
var age = array[1];

요즘 자바스크립트는 이런 문법을 사용해서 똑같이 구현합니다.

var [name, age] = ['Kim', 20]
이렇게 합니다.

그럼 각각 name = 'Kim', age = 20 이라는 변수가 생성됩니다.

귀찮게 등호여러번 쓸 필요 없이 왼쪽 오른쪽 형식을 똑같이 맞춰주시면 자동으로 알아서 변수가 생성됩니다.

이게 변수만들 때 쓰는 destructuring 문법입니다.

익숙하지 않아도 리액트 사용을 위해 일단 외우는게 중요합니다.

let [글제목, 글제목변경] = useState('남자 코트 추천');

글제목이라는 변수에는 "남자 코트 추천"이라는 데이터가 들어가있는 상황

글제목변경은 변경될 셋팅값

변수 말고 state에 데이터 저장해서 쓰는 이유

변수가 변경될 때 자동으로 관련된 HTML을 재렌더링되게 만들고 싶으면 그럴 때 변수 말고 state에 저장해서 데이터바인딩을 하셔야 합니다.

1편 마감