React Part.1

react 장점

1. single
2. html 재사용 가능
3. 앱개발 가능

react 작업환경 셋팅

• 해당폴더 마우스 우클릭 + powershall
  - npx create-react-app "프로젝트명"

• 미리보기 띄우기
  - 터미널에서 npm start

• 프로젝트 파일 설명

  • node_odules 폴더: 라이브러리 코드 보관함
  • public 폴더: static 파일 모아놓는 곳
  • src 폴더: 코드 짜는 곳 (app.js 메인페이지)
  • package.json 파일 : 프로젝트 정보 (버전, 라이브러리 명들 등)

리액트에서 jsx 사용한다.
-jsx: .js파일에서 쓰는 html 대용품

JSX 문법

1. class넣을 땐 className이라고 써야 한다.
2. css 파일 쓰고 싶을 땐 `import './App.css;'
3. 중괄호 문법
   • 변수 넣을 땐{중괄호} = 데이터바인딩이라고 부른다.
4. style 넣을 땐 style={{스타일명: '값'}}
   • 스타일명은 camelCase로 쓴다.

(참고) 에러메세지는 터미널/브라우저에서 확인 또는 개발자도구에서 확인한다.

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

function App() {

  let post = '강남 우동 맛집';

  return (
    <div className="App">
      <div className="black-nav">
        <h4>블로그임</h4>
      </div>
      <h4 style={{color : 'red', fontSize : '16px'}}>{ post }</h4>
    </div>
  );
}

export default App;

State

• return()안에는 병렬로 태그 2개 이상 금지
• 자료 잠깐 저장할 땐 변수
• react에서는 자료 잠깐 저장할 땐 state 써도 된다.
• useState

import { useState } from 'react';

function App() {

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

1. import
2. let [a, b] = useState();
   b는 state 변경 도와주는 함수

Destructuring 문법
array 자료를 변수로 빼는 문법

let num = [1, 2];
// let a = num [0];
// let c = num [1];

// Destructuring 
let [a, c ] = [1, 2];

• 일반 변수는 갑자기 변경되면 html에 자동으로 반영이 안된다.
• state쓰던 html이 자동으로 재렌더링되기때문에 state 사용 권장!
  변동시 자동으로 html에 반영되게 만들고 싶다면 state 사용

자주 변경될 것 같은 html 부분은 state로 만들어놓기

좋아요 버튼 만들기

• onClick 쓰는 법 ( eventHandler)
• onClick={}안엔 함상 함수이름을 넣어야 한다.
• 함수만드는 문법 바로 넣어도 상관없다. (화살표 문법도 가능) ()=> {}

state 변경하는 법

• 등호로 변경금지 ( html에 반영되지 않는다. )
• state 만들 때 두번째로 작명한 state 변경용 함수를 사용해서 변경해야 html 재렌더링이 잘된다.
• state변경함수(새로운state)

  let post = '강남 우동 맛집';
  let [글제목, b] =  useState(['남자 코트 추천', '강남 우동맛집', '파이썬독학']);
  let [따봉, 따봉변경] = useState(0);
  
  return (
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>
      <div className='list'>
        <h4>{ 글제목[0] } <span onClick={ ()=> { 따봉변경(따봉+1)} }> 💗 </span> { 따봉 } </h4>
        <p>2월 17일 발행</p>
      </div>

array/object state 변경

• array/object 다룰 때 원본은 보존하는 게 좋다.

      <button onClick={()=> { 
        let copy = [...글제목];
        copy[0] = '여자코트 추천';
        글제목변경(copy);
        }}> 글수정 </button>

• state 변경함수 특징

• 기존 state== 신규state의 경우 변경해주지 않는다.

• array/object 특징

• array/object 담은 변수엔 화살표만 저장된다. ([1,2,3]이 어디에 있는지 가리키는 화살표만)

• reference data 라서 그렇다.

• [...글제목]; 을 쓰면 새로운 state로 생각한다. 새로운 배열

기존 state가 array나 object면 독립적 카피본을 만들어서 수정해야 한다. => shallow copy

component

• 원하는 html 덩어리를 한 단어로 축약하는 것을 말한다. 여기서 한 단어가 컴포넌트!

1. function 만들고 ( 다른 함수 바깥에 만들어야 한다. 작명은 영어대문자로 시작)
2. return() 안에 html 담기
3. <함수명></함수명> 쓰기 또는 <함수명/>도 가능하다.

(참고) return() 안에 병렬기입하려면
의미 없는 <div> 대신에 <></>사용가능하다.

      <Modal></Modal>

      <h4 style={{color : 'red', fontSize : '16px'}}>{ post }</h4>
    </div>
  );
}

function Modal(){
  return (
    <div className='modal'>
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

• 컴포넌트로 만들면 좋은 경우

1. 반복적인 html 축약할 때
2. 큰 페이지들
3. 자주 변경되는 html UI들

• 컴포넌트의 단점: state 가져다 쓸 때 문제 생긴다.
• 컴포넌트 만드는 문법2

let Modal =  () => {
	return (
     <div></div>
    )