[React] React 시작하기

프로젝트 생성하기

 

1. 작업용 폴더 만들기

2. 폴더 shift + 마우스 우클릭 -> powershell 열기

3. 라이브러리의 도움을 받아서 프로젝트 생성

npx create-reaxt-app 프로젝트명

 

 

프로젝트 구조

node_modules : 프로젝트 구동에 필요한 라이브러리 코드 보관함

public : static 파일 모아놓는 곳

src : 코드 짜는 곳

package.json : 프로젝트 정보

 

 

 

 

JSX ?

: 자바스크립트의 확장 문법. XML와 매우 흡사

- 공식적인 자바스크립트 문법은 X

 

 

JSX 문법 3가지

 

1. HTML에 class 넣을 때 className으로

- App.js에서 작성하고 있는 것은 HTML이 아니라 JSX 이기 때문

- class는 클래스를 정의하는 예약어 이기 때문에 대신 className을 사용

 

2. 변수에 담긴 데이터를 바인딩 할때는 중괄호 { }

- '데이터 바인딩'이라고 함

 

3. style 속성

<div style={ { 속성명1 : '속성값1', 속성명2 : '속성값2', } }></div>

- 속성명에 대쉬를 쓸 수 없음 (뺄셈 기호라서,,) => 카멜케이스 사용 ex) fontSize

- 중괄호 안에 object 형식으로 넣어주기

 

 

예제)

// App.js

function App() {

  // 2. 데이터 바인딩
  let post = 'today, 첫 눈 온 날';

  return (
    <div className="App">
     
     // 1. class 대신 className 사용
     <div className='black-nav'>
      
      // 3. 스타일 지정
      <h4 style={{ color : 'pink', fontSize : '30px' }}>udragon.log</h4>
     </div>
    
    // 2. 데이터 바인딩
     <h3>{ post }</h3>
    </div>
  );
}

// App.css

.black-nav {
  display: flex;
  background: black;
  width : 100%;
  color : white;
  padding-left : 20px;
}

실행 결과)

 

 

 

 

state

: 자료를 잠깐 저장

- state는 변동사항이 생기면 state를 사용하는 html을 자동으로 재랜더링 함

•  UI 기능 개발의 편리함, 자연스럽게 동작
• 변경이 잦은 데이터들을 저장하는 것이 좋음

import { useState } from 'react';

function App() {
  let [ 자료변수명, state 변경을 도와주는 함수 ] = useState(저장할 자료);
  
  <div className="App">
  	// 사용하기
  	<p>{ 자료변수명 }</p>
  </div>
}

 

 

[참고] destructuring

Array 안에 있는 데이터를 변수로 쉽게 저장하고 싶을 때 쓰는 문법

• 왼쪽 오른쪽 형식을 똑같이 맞춰주면 자동으로 변수 생성

// 위와 아래는 같은 코드
let arr = ['yuna', 17 ]

let name = arr[0]
let age = arr[1]

// destructuring
let [name, age] = ['yuna', 17 ]

 

 

 

예시)

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

function App() {

  // let [title1, a] = useState('크로스핏 컴백한 날');
  // let [title2, b] = useState('운동하는데 첫 눈 왔당');
  // let [title3, c] = useState('서울 가야하는 이유 + 1');

  // 리스트 형식으로도 가능
  let [titles, f] = useState(['크로스핏 컴백한 날', '운동하는데 첫 눈 왔당', '서울 가야하는 이유 + 1']);

  return (
    <div className="App">
     <div className='black-nav'>
      <h3>udragon.log</h3>
     </div>
     <div className="list">
      <h4>{ titles[0] }</h4>
      <p>11월 30일 작성됨</p>
     </div>
     <div className="list">
      <h4>{ titles[1] }</h4>
      <p>11월 30일 작성됨</p>
     </div>
     <div className="list">
      <h4>{ titles[2] }</h4>
      <p>11월 30일 작성됨</p>
     </div>
    </div>
  );
}


export default App;

실행 결과)

 

 

 

 

 

 

 

1. 크로스핏 소중한 한 달 다니게 됐음! 행복,,,

2. 운동하다가 창 밖 봤는데 첫 눈이!

3. 서울 가야하는 이유가 하나 더 늘었다,,! 축하해👭