[Blog-project] 데이터바인딩

kirin.log·2021년 4월 24일

🚀 React를 사용하는 이유?

Web app을 만들기 위하여 사용한다.
다른 페이지로 넘어가거나 포스팅을 발행하는 등의 액션을 실행할 때 새로고침이 되지 않고 스무스하게 동작한다.
UX가 뛰어나서 좋은 사용자경험을 제공하며, HTML관리가 편해진다.
리액트 문법으로 iOS/Android 모바일 앱제작도 가능하다.
가장 생태계가 활발하여 사용자가 많다

🚀 React 개발환경 셋팅

1) Node.js 최신버전 설치
2) 프로젝트 담을 폴더(폴더명: blog_project) 생성 후 VSCode로 폴더 열기
2) npx create-react-app 파일명(blog) 을 터미널에 작성하여 프로젝트 생성

❗ Error가 발생할 경우

🐥 에러1) npx 어쩌구 명령어 입력하자마자 에러가 난다면?
설치가 잘 되다가 갑자기 중간에 빨간게 뜨며 에러가 나는 대부분의 경우는 nodejs가 최신버전이 아닐 경우이다.
그리고 특히 윈도우는 Nodejs 14이상 버전이 꼭 필요하다. 14 이상이 아니면 재설치하기.

🐥 에러2) npm : command not found 에러
npm : command not found 라는 에러가 뜨는 것은 99%의 확률로 node 이상하게 설치해서이다.
C드라이브에 설치하면 작업폴더를 C드라이브에 만들어야 제대로 npm 어쩌구가 이용가능하다.
Node 삭제했다가 공식 홈페이지에서 Node 신버전 제대로 다운받아서 위 설명대로 다시 설치해보기.

🐥 에러3) 맥에서 permission이 없어요, 권한이 없어요 이런 에러가 뜬다면?
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
▲ 예를 들면 이런 에러인데 폴더 수정 권한이 없다고 에러를 띄우는 것.
위의 에러는 /usr/local/lib/node_modules 라는 폴더에 수정권한을 주면된다.
터미널을 켜서 이거 둘 중에 하나를 입력해보기(아마 둘 중 하나 입력하시면 대부분 해결될것)
sudo chown -R 님맥북유저이름: 위에에러뜬경로
sudo chown -R $USER 위에에러뜬경로
🐥 에러4) 해결책 찾아봐도 진짜 안되면?
그냥 sudo npx create-react-app blog 이런 식으로 npm이나 npx 쓰실 때 앞에 sudo 라는 단어를 붙여준다.

🐥 에러5) 윈도우 Powershell에서 빨간글씨로 ‘보안오류’가 뜬다면?
“허가되지 않은 스크립트 입니다 어쩌구~” 그런 에러가 뜨면, 시작 – 검색 – Powershell 검색 – 우클릭 – 관리자 권한으로 실행한 뒤 Set-ExecutionPolicy Unrestricted 라고 대소문자 하나라도 틀리지않고 입력하기.

🐥 에러6) 윈도우는 Powershell을 이용하는 경우도 권한이 없다고 뭐라 그럴 수 있다
해결책1. 터미널을 VScode 에디터에서 켜서 npx 어쩌구 그런거 하지 말고 터미널을 켜서 한번 아래와 똑같이 설치해보기.

아까 만든 작업폴더를 탐색기로 오픈한 뒤, 파일 – PowerShell 열기 – 관리자권한으로 PowerShell 열기 눌러서 터미널을 관리자모드로 열기.
이렇게 연 다음에 npx create-react-app blog 어쩌구가 되면 앞으로 터미널에서 뭐 하라고 하면 터미널 이렇게 켜서 사용하면 된다.

🐥 에러7) The engine “node” is incompatible with this module.
npx로 설치시 이런 에러가 있을 수 있다. nodejs 버전이 낮거나 다르다는 뜻이며 nodejs를 에러메세지가 요구하는 버전으로 재설치하시면 된다.

🚀 JSX문법으로 작성하기

👉 JSX 기본 문법

리액트에서 class=””를 넣고 싶으면 className=”” 라고 사용
모든 태그는 닫아주기 혹은 셀프클로징 ( <input /> , <img /> )
항상 전체를 감싸주는 태그 적용하기(< > < /> 빈태그 가능)
return() 내에서 조건문 사용할때는 중괄호({ })로 감싸주고 삼항연산자사용하기
return() 내에서 반복문 사용할때는 중괄호({ })로 감싸주고 map사용하기
(reutn 밖에서는 for문 사용 가능)

💡 데이터바인딩

1) 변수 생성
2) 변수에 원하는 값 담기
3) 변수명을 return문 내 중괄호로 감싸서 넣어주기

function App(){

  let data = '안녕하세요';  // data라는 변수 생성 후, 값을 담아준다

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
        <div> {data} </div>  // 중괄호 내 변수명을 담음으로써 "안녕하세요" 내용이 담긴다
      </div>
    </div>
  )
}

❗ href, id, className, src 등 여러가지 HTML 속성들에도 데이터바인딩이 가능

🐶 데이터바인딩과 관련된 중요한 데이터를 저장할 땐 변수 대신 state를 만들어쓴다.

💡 State 사용법

1) import React, { useState } from 'react'; 선언하기
2) let [state명, state변경함수] = useState(값넣기) 로 state생성
3) state를 넣고자 하는 부분에 {state명} 을 넣어준다

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

function App(){

  let [title, setTitle] = useState('스릴러 영화 추천');
  // state이름: title , state변경함수 이름: setTitle
 

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

      <div className="list">
        <h3> { title } </h3>   // <h3>스릴러영화추천</h3>  으로 출력
        <p>2월 17일 발행</p>
        <hr/>
      </div>
    </div>
  )
}

useState()라는 함수는 state를 하나 만들어주는 함수이다.
❗ 이걸 이용하기 위해 상단에 import {useState} 를 추가해야한다
useState( 저장할 데이터 ) 이렇게 사용하면 state에 데이터를 저장할 수 있다.
useState()를 쓰면 [데이터1, 데이터2]이라는 array 데이터가 두개 남는다.
이걸 각각 a와 b라는 변수명으로 ES6 destructuring 문법을 이용해 저장해서 쓰면 된다.
a라는 변수엔 실제 저장할 데이터(=state)가 들어있고, b라는 변수엔 저장할 데이터를 변경시킬 함수(=state변경함수)가 들어있다.

💡 destructuring 문법이란?
array 안에 있는 데이터들을 변수로 쉽게 저장하고 싶으면 쓰는 신문법.
// 기존방식
let array = ['Kim', 20];

let name = array[0];
let age = array[1];
// 신문법
let [name, age] = ['Kim', 20]
왼쪽 오른쪽 형식을 똑같이 맞추면 자동으로 알아서 변수가 생성된다. 이것이 변수만들 때 쓰는 destructuring 문법이다.

state에는 Array, Object 아무거나 다 넣을 수 있다. 많은 자료를 한번에 저장하고 싶으면 Array, Object 자료형으로 넣으면 좋다.

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

function App(){

  let [title, setTitle] = useState( ['스릴러 영화 추천', '쌈밥 맛집 추천'] );
  // state의 기본값을 배열(`[ ]`)로 저장했다.

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h3>{ title[0] }</h3>  // state를 꺼내쓰려면 배열이므로 indexing으로 담아준다
        <p>2월 17일 발행</p>
        <hr/>
      </div>
      <div className="list">
        <h3>{ title[1] }</h3>  // state의 1번째 요소(='쌈밥 맛집 추천')
        <p>2월 17일 발행</p>
        <hr/>
      </div>
    </div>
  )
}

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

변수로 데이터를 저장 후, 변수명을 중괄호({ })로 감싸서 데이터를 전달할 수 있지만 굳이 state로 만들어서 데이터바인딩 하는 이유는?
👉 변수가 변경될 때 자동으로 관련된 HTML을 재렌더링되게 만들고 싶기 때문에

예를들어, 버튼 생성 후 버튼을 누르면 수정사항이 자동으로 웹페이지에 스무스하게 반영되게 만들고 싶을 수 있다.
그럴 때, state를 사용하면 state가 포함된 HTML을 자동으로 재렌더링 해줄 수 있다.
🪓 리액트는 state가 수정이 일어나면 state가 포함된 HTML을 자동으로 재렌더링 해준다.
(변수를 사용하면 새로고침해야만 내용이 업데이트된다)
🪓 state는 상품명, 글제목, 가격 이런것 처럼 자주 변하는 데이터들을 저장하시는게 좋은 관습이다. (로고처럼 안바뀌는 데이터는 그냥 하드코딩)

kirin.log

boma91@gmail.com

이전 포스트

canvas

다음 포스트