[코딩애플] 리액트 기초 #1

일단 프로젝트를 만들기!

터미널 -> npx create-react-app [만들고자하는 프로젝트명]

npm start로 실행

 

리액트 기초 - JSX 사용법

리액트의 메인은 src의 App.js

App.js가  public의 index.html로 보내질 수 있도록 src의 index.js에서 작성됨.

 

1. 태그에 class를 주고 싶으면 <div className="클래스명">

JSX에서는 class가 아닌 className이라고 작성! class라는 예약어가 있기 때문.

 

2. 리액트가 날 것의 HTML보다 편한 이유

JSX를 이용하여 데이터 바인딩을 매우 쉽게 할 수 있다.

데이터 바인딩?

 

let posts = '강남 고기 맛집';

 

강남 고기 맛집이라는 데이터를 가져와서 posts라는 변수에 저장하고,

 

<h4>{ posts }</h4>

중괄호 안에 { 변수명 }

-> 매우 쉬운 데이터 바인딩!

 

function App() {

  let posts = '강남 고기 맛집';

 

  function 함수(){

    return 100

  }

  return (

    <div className="App">

      <div className = "black-nav">

        <div>봐라오케</div>

      </div>

      <h4>{ 함수() }</h4>

    </div>

  );

}

함수도 마찬가지로 데이터 바인딩 가능. { 변수명, 함수 등}

 

이미지 import 하기

import logo from './logo.svg';

 

return (

    <div className="App">

      <div className = "black-nav">

        <div>봐라오케</div>

      </div>

      <img src={ logo }></img>

      <h4>{ 함수() }</h4>

    </div>

  );

 

상상하는 모든 곳에 {} 중괄호로 변수 집어넣기 가능.

 

 

3. JSX에서 style 속성 집어넣을 때 style={ object 자료형으로 만든 스타일 }

 

object 형식으로! 무조건 중괄호.

 

return (

    <div className="App">

      <div className = "black-nav">

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

      </div>

      <h4>{ posts }</h4>

    </div>

  );

}

 

camelCase 작명 관습에 따라 속성명에 (-) 대시를 사용할 수 없다.

대시 뒷부분을 대문자로 치환.

 

 

 

리액트 기초 - useState

데이터는 변수에 넣거나 state에 넣거나...

리액트의 데이터 저장공간 state 만들기!

 

1. { useState } 상단에 첨부

import React, { useState } from 'react';

 

react에 있는 내장함수를 사용하겠다는 의미! useState() 함수를 쓸 수 있다.

블로그 제목 등의 글을 만들 수 있다.

 

 

2. useState(데이터)

데이터 저장공간을 만든다.

 

useState('남자 코트 추천'); [a,b]

 

array가 남고, 데이터 2개가 들어가있음.

a자리에는 진짜 데이터 '남자 코트 추천' 이 그대로 들어간다.

b자리에는 이 데이터를 수정하기 위한, 남자 코트 추천 state를 정정해주는 함수를 생성한다.

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

 

[a,b]라는 변수를 만들고 useState에 있던 변수 두개를 각각 집어넣겠다는 의미.

[ state 데이터, state 데이터 변경 함수 ]

 

 

destructuring이라는 새로운 문법!

array, object에 있던 자료를 변수에 쉽게 담고 싶을 때 사용.

var [a,b] = [10, 100];

 

10, 100을 각각 a, b에 담겠다는 의미. var a = 10, var b = 100

 

function App() {

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

  let posts = '강남 고기 맛집';

  return (

    <div className="App">

      <div className="black-nav">

        <div>개발 Blog</div>

      </div>

      <div className="list">

        <h3> { 글제목 } </h3>

        <p>2월 17일 발행</p>

        <hr/>

      </div>

    </div>

  )

 

state는

• 변수 대신 쓰는 데이터 저장공간
• useState()를 이용해 만들어야 함
• 문자, 숫자 array, object 모두 저장 가능

 

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

<h3> { 글제목[1] } </h3>

 

 

array를 저장하여 array의 1번째 항목만을 출력.

state에 데이터를 저장해놓는 이유 : 웹이 App처럼 동작하게 만들기 위함!

state는 데이터가 변경되면 HTML이 새로고침 없이 자동으로 재렌더링된다.

그냥 변수에 저장할 경우 렌더링이 되지 않고 새로고침된다.

자주 바뀌고 중요한 데이터는 변수가 아닌 state로 저장해서 쓰자!