[ 코딩애플 / React 리액트 기초부터 쇼핑몰 프로젝트까지! ] Part1. 리액트 프로젝트 설치 / 레이아웃 JSX 문법 / state / 버튼 기능 개발 / array, object state 변경

- Summary -
리액트 프로젝트 설치 / 레이아웃 JSX 문법 / state / 버튼 기능 개발 / array, object state 변경

 

강의를 들으며 나중에 참고할 부분 따로 정리

보기 좋게 정리한다기보다 낙서하듯이 정리할 예정..

---

 

1. 리액트 프로젝트 설치

npx create-react-app

이거 쓰려면 npm 필요한데 node.js 설치하면 따라 옴

 

2. vs코드에서 폴더 열기

node_modules : 라이브러리 모아둠

public : static 파일 모아둠

src : 소스코드 모아둠

- 보통 App.js에서 메인페이지 구성

package.json : 프로젝트 정보 모아둠

 

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

 

원래 자바스크립트로 변수를 사용해 값을 넣어주려면 복잡했음 (아래 사진)

하지만 리액트 사용 시 중괄호 { } 로 변수를 이용할 수 있음 (아래 사진) => 데이터 바인딩

style은 인라인으로 넣을 수도 있는데 오브젝트 자료형으로 작성할 것 (아래 사진)

중간에 하이픈이 있는 css 설정은 카멜케이스로 변경해서 작성해주면 됨 (아래 사진)

 

 

4. State

 

 

자바스크립트 destructuring 변수생성 문법

let num = [1, 2]; // 자바스크립트 array 문법

//1과 2를 변수에 할당하고 싶을 때 원래 방법
let a = num[0];

let c = num[1];

//destructuring 문법
let [a, c] = [1, 2]

 

그럼 State 문법을 언제 쓸까?

변수와 State는 차이를 가지고 있다.

변수는 값이 변경되었을 때, html도 변경이 되어야 하는데 자동으로 되지 않음. 

반면에 State는 값이 변경되면 html이 자동으로 재렌더링 됨.

 

자주 변경될 것 같은 html 부분은 State로 변경해두기

 

HOMEWORK 1

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

function App() {

  let post = '강남 우동 맛집';
  let [title, setTitle] = useState(['남자 코트 추천', '강남 우동 맛집', '파이썬 독학'])

  return (
    <div className="App">
      <div className='black-nav'>
        <h4>BLOG</h4>
      </div>
      <div className='list'>
        {title.map((title) => (<div>
          <p>{title}</p>
          <p>2023년 3월 26일</p>
          <hr/>
        </div>
        ))}
      </div>
    </div>
  );
}

export default App;

인덱싱 사용

 

5. 버튼 만들기

* 참고 : 그림이모지 => 크롬에 마우스 오른쪽 클릭하면 '그림 이모티콘' 클릭해서 이용할 수 있

 

eventHandler - onClick

 

HOMEWORK 2

첫번째 글제목을 여자 코트 추천으로 바꾸기

/* eslint-disable */

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';
import { hover } from '@testing-library/user-event/dist/hover';

function App() {

  let post = '강남 우동 맛집';
  let [title, setTitle] = useState(['남자 코트 추천', '강남 우동 맛집', '파이썬 독학'])
  let [count, setCount] = useState(0);


  function plusLike(){
     setCount( count + 1 )
  }

  function plusGirl(){
    setTitle(title => ['여자 코트 추천', title[1], title[2]])
  }

  return (
    <div className="App">
      <div className='black-nav'>
        <h4>BLOG</h4>
      </div>
      <button onClick={plusGirl}>여자 코트 추천</button>
      <span onClick={plusLike}>👏</span> {count}
      <div className='list'>
        {title.map((title) => (<div>
          <p>{title}</p>
          <p>2023년 3월 26일</p>
          <hr/>
        </div>
        ))}
      </div>
    </div>
  );
}

export default App;

코딩애플에서 나온 정답 (아래사진)

확장성이 부족한 코드

이것도 ㄱㅊ

그러나 원본 데이터는 보장하는 게 좋음

copy본을 활용

❤️ 원리 
State 변경 함수 동작 원리
: 갈아치우기 전에 조건을 따지는데 기존 State와 신규 State가 같을 경우 갈아치우지 않음
Array, Object 데이터 동작 원리
: array/object 담은 변수엔 화살표만 저장됨.

따라서 배열을 변경한다 = 화살표를 변경한다 라고 작동원리를 이해할 것

추가공부 하고 싶다면 reference data type 공부하세요 !

state가 array/object면 독립적 카피본을 만들어서 수정해야 함

 

여자 코트 추천을 추가하기

/* eslint-disable */

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';
import { hover } from '@testing-library/user-event/dist/hover';

function App() {

  let post = '강남 우동 맛집';
  let [title, setTitle] = useState(['남자 코트 추천', '강남 우동 맛집', '파이썬 독학'])
  let [count, setCount] = useState(0);


  function plusLike(){
     setCount( count + 1 )
  }

  function plusGirl(){
    setTitle(title => [...title, '여자 코트 추천'])
  }

  return (
    <div className="App">
      <div className='black-nav'>
        <h4>BLOG</h4>
      </div>
      <button onClick={plusGirl}>여자 코트 추천</button>
      <span onClick={plusLike}>👏</span> {count}
      <div className='list'>
        {title.map((title) => (<div>
          <p>{title}</p>
          <p>2023년 3월 26일</p>
          <hr/>
        </div>
        ))}
      </div>
    </div>
  );
}

export default App;