[코딩애플] 기초 2강~3강 정리

기초 2강

 

1. 리액트 개발환경, HTML과 유사하다!! 다만 문법에서 살짝 차이 있음.

1) 시멘틱 태그 그대로 사용 가능

2) 문법적 차이

 a. class= " " 대신 className = " "

 b. 하이픈(-) 안쓰고 카멜표기법 사용

 c. 중괄호의 사용! { }

 

2. 중괄호의 사용

1) 이를 사용함으로 데이터 바인딩이 매우 쉬워짐. - 변수명, 함수, 이미지, 클래스명 등

function App() {

  let posts = '강남고기 맛집'; //변수에 데이터 저장

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

▶ 원래였다면 document.getElementById().src = ~~ 이렇게 길었을텐데 매우 짧아진 것을 볼 수 있음.

 

3. 스타일 넣고 싶다면? style = { 오브젝트 자료형으로 만든 스타일 }

(예) style = { { color : 'blue', fontSize : '30px' } }

 

 

기초 3강

데이터는 변수에 넣거나 / state 넣거나 둘 중 하나임.

1. 자주 바뀌는 중요 데이터 ▶ state에 저장!

1) useState 함수 사용

2) state 쓰는 이유? <웹 앱> 처럼 쓰려고.

1. state 데이터가 변경될 때, HTML에도 자동으로 반영됨(자동 랜더링).

2. 그러면 새로고침 없어도 <웹 앱> 같은 사이트를 만들 수 있음.

 

▶ <웹 앱>처럼 만들기 싫거나 / 자주 변경되지 않는 데이터 저장 want?

▶ var let const 변수 사용

 

2. state 공간 만드는 법

1) 상단에 { useState } 첨부 = '리액트에 있는 내장함수 좀 쓰겠습니다~^^;'

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

(기존) import React from 'react'; ▶ import React, { useState } from 'react';

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

 

2) let [ a, b ] = useState(데이터);

 a. a에는 찐 데이터, b에는 state 데이터 수정위한 함수가 들어감.

 b. 실제 작성된 코드

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

 cf. ES6 destructuring 문법 사용 : var [ a, b ] = [ 10, 100 ]; - array, object에 있던 자료를 변수에 쉽게 담고 싶을 때 사용

 

 

3. 정리

"자주 바뀌는, 중요한 데이터는 state로 저장해서 쓰세요. 웹 앱 제작의 중요 원칙입니다."

 

1) state는 변수 대신 쓰는 저장 공간

2) useState() 이용해 만들어야 함.

3) 문자, 숫자, array, object 다 저장가능.

▶ array 사용했을 때, 글제목[0] : 남자 코트 추천 / 글제목[1] : 강남 우동 맛집 보여짐.

function App() {

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

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