리액트 설치 및 레이아웃 JSX문법 / state 문법

2강. 리액트 설치와 개발환경 셋팅

리액트 파일 만들 때는

폴더를 하나 만든 후 폴더 우클릭 후 터미널로 열기(맥북기준)

npx create-react-app blog(blog에 파일명 입력)

리액트 처음 시작할 때 (미리보기)

→ npm start

왜 설치를 했는가 ?

html에도 직접 리액트 설치할 수 있는데

create react app 라이브러리를 사용해서 도움을 받음

사용하려면 npm이 필요해서 node.js 설치해야함

폴더 생성 후 폴더 열기하면 파일 안에

node_modules 폴더 : 라이브러리 보관함

public 폴더 : static 파일(html, 이미지파일 등 보관할 때)

src 폴더 : 코드 짜는 곳 - 소스 코드보관함

app.js가 메인페이지

app.js → html

app.js 파일 안에 있는 것을 index.html에 넣어줌

이는 index.js라는 파일이 도와줌

package.json : 프로젝트 정보 / 라이브러리 명이 생성되어 있음

3강 리액트에서 레이아웃 만들 때 쓰는 jsx 문법 3개

html파일이 아닌데 js에서도 html을 변경할 수 있었던 이유는

jsx파일이라서 가능 → .js파일에서 html 대용품

→ 이거를 쓰는 이유는 원래 리액트에서 생성을 하려면 길게 코드를 입력해야 함

div → React.createElement(’div’, null, ‘Hello World’) 등

JSX를 사용해서 간단하게 만들어줌 <di></div>

css는 똑같음

CSS를 입력할 때

JSX 문법1.

class 넣을 땐 className 입력

class는 class를 선언해주세요. 라고 프로그밍 문법이 있음. 겹쳐서 className으로 사용

css파일 사용하려면 상단에 import’css파일 경로’

아래와 같이 넣어줌

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <div className="black-nav">
        <h4></h4>
      </div>
    </div>
  );
}

export default App;

JSX 문법2.

변수 넣을 땐 {중괄호} → 데이터바인딩

아래와 같이 블로글 글 제목에 서버데이터를 가지고 와 입력하고 싶을 때 사용함

서버가 없기에 let으로 변수 설정 후 입력

function App() {

  let post = '강남 우동 맛집'

  return (
    <div className="App">
      <div className="black-nav">
        <h4>블로그임</h4>
      </div>
      <h4>블로그 글 제목</h4>
    </div>
  );
}

원래라면 document.querySelector('h4').innerHTML = post; 이러한 형식으로 바꿔야함

하지만 jsx 문법인 {중괄호}를 사용

→ 데이터 바인딩 { 중괄호 }는 많은 곳에서 사용 가능 / className, id, href, src 등등

아래와 같이 { 변수명 }을 입력

function App() {

  let post = '강남 우동 맛집'
  

  return (
    <div className="App">
      <div className="black-nav">
        <h4>블로그임</h4>
      </div>
      <h4>{ 변수명 }</h4>
    </div>
  );
}

export default App;

이는 서버에서 데이터를 가져와서 html 사이사이 넣을 때

데이터 바인딩이라 해서 변수에 있던 데이터를 넣는 html에 작업할 때 유용함

JSX 문법3.

style ={ {속성명 : ‘속성값’} }

style 넣을 땐 style ={ {스타일명 : ‘값’} }

→ object 자료형으로 만들어서 넣어야 함

-(빼기)기호를 넣으면 진짜 빼기라서

css에서 font-size를 했던 것을 fontSize로 바꿔야함 (카멜케이스)

unction App() {

  let post = '강남 우동 맛집'
  

  return (
    <div className="App">
      <div className="black-nav">
        <h4 style={ {color : 'red', fontSize : '16px'} }>블로그임</h4>
      </div>
      <h4>{ post }</h4>
    </div>
  );
}

export default App;

리액트는 에러메세지는 터미널 / 브라우저에서 바로 확인 가능

→ 여기서도 안뜨면 개발자도구에서 console에 확인

4강 중요한 데이터는 변수 말고 state에 담는다.

html 짤 때 html안에서 짜야함

return()안에는 병렬로 태그 2개이상 기입 금지

아래와 같이 짜면 안됨

return ( 
  <div className='APP'>
  </div>
  <div></div>
)

자료를 잠깐 저장할 때 state 문법을 사용함

useState 를 입력하면 아래와 같이 생김

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

아래와 같이 state를 입력 한 후 소괄호 안에 입력

function App() {

  let post = '강남 우동 맛집'
	let [a, b] = useState('남자 코트 추천')
  
  

  return (
    <div className="App">

정리하자면

1. import{ useState }
2. useState(보관할 자료)
3. let [작명, 작명]

ex) let [a, b] = useState('남자 코트 추천')

a는 state에 보관했던 자료

b는 자유롭게 작명가능 → state 변경 도와주는 함수

Destructuring 문법

[1, 2, 3] → array 자료

let num = [1, 2];

1, 2를 변수로 뺄 때

let a = num[0]; → num의 첫번째 빼주세요.

let c = num[1]; → num의 두번째 빼주세요.

ex)

let array = ['Kim', 20];

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

쉽게 사용 가능(왼, 오른쪽 같게 만들어줌)

let [a, c] = [1, 2];

state를 쓰는 이유

위 내용들과 같이

왜 state를 써야 하는지에 대함

변수가 있는데 변경이 되었다.

let post = ‘강남’ 에서 let post = ‘역삼’ 으로

그러면 아래에 적어져 있는 html이 자동으로 반영이 되지 않음

{ post }를 바꿔줘야 함

state에 저장했던 데이터가 갑자기 변경이 되면

state를 쓰던 html은 자동 재랜더링이 되어 값이 변경 된다.

정리

state 언제 사용함?

→ 변동 시 자동으로 html에 반영되게 만들고 싶을 때 state 사용

→ 자주 변경되는 html를 state로 만들어주고 넣어주는게 나음

 

-------------------------------------------------------------------------------------------------------------

오늘 react 강의를 다시 들었다. 처음 유튜브 보듯이 어떤 개념인지 확인 하기 위해 쭉 듣고, 그리고 다 들은 후

다시 정독 한다. 세세하게 필기를 하고 모르는 개념이 있으면 돌려보고 있다. 처음 볼 때보다는 익숙해졌지만, 기억이 안나는 부분도 있고 

해서 자세히 보면서 해야겠다. 이번주 수요일에는 자체적으로 리액트 스터디가 있는데, 내가 공부했던 부분을 쭉 정리해서 설명할 예정이다. 

강의를 보거나 필기를 할 때는 이해가 안되었던 부분이 설명을 하면서 이해가 되는 것 같다. 열심히 다시 달려야겠다.