React 맛보기

☠️ 하루 React 공부한 내용을 그대로 복붙한 글

애플코딩(function형식)과 생활코딩(class형식)의 혼합물이지만 최신 버전인 function형식으로 정리했다.

공부한 내용들

0) 스타일 변경과 이미지 삽입
1) useState(설정, 변경 방법)
2) component
3) props

👇🏼 (주석 보면 이해됨)

/* eslint-disable */

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

function App() {
    function 함수() {
      return '함수';
    }
    let fStyle = { color: 'red', fontSize: '30px'}

    let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '파이썬 독학']);
    //useState는 ['남자 코트 추천', 바뀔 내용] 값이 담겨져 있어서
    //a = '남자 코트 추천', b = 바뀔 내용이 되게 된다.

    let [따봉, 따봉변경] = useState(0);
    //state는 변경 방법이 따로 있다. 따봉변경()을 이용해야 재랜더링이 일어난다.

    function 제목바꾸기() {
      //글제목변경(['여자 코트 추천', '강남 카레 맛집', '리액트 독학']);
      //글제목변경 안의 배열의 길이가 너무 길다. 근데 원본 state는 수정이 불가.
      //따라서 복사본(deep copy)을 생성하고, 그것을 수정해주자.
      
      const newArray = [...글제목];
      //글제목을 그대로 복사하는게 아니라, [...글제목]으로 복사하는 이유는, 
      글제목이라는 값을 공유하고 있는 것이기 때문에 수정이 X, 값을 새로 만들어줘야 한다.
      
      newArray[0] = '여자 코트 추천';
      글제목변경(newArray);
    }

    return (
      <div className="App">
        <div className="blackNav">
          <div>개발 Blog</div>
        </div>
        <button onClick={ 제목바꾸기 }>버튼</button>
        <div className="list">
          <h3>{ 글제목[0] } <span onClick={ ()=>{ 따봉변경(따봉+1) } }>👍🏼</span> { 따봉 } </h3>
          <p>2월 17일 발행</p>
          <hr/>
        </div>
        <div className="list">
          <h3>{ 글제목[1] }</h3>
          <p>2월 18일 발행</p>
          <hr/>
        </div>
        <div className="list">
          <h3>{ 글제목[2] }</h3>
          <p>2월 19일 발행</p>
          <hr/>
        </div>

        <Modal title="제목" sub="날짜"></Modal>

        <h4 style={ fStyle }>{ 함수() }</h4>

        <img src={ logo } />
      </div>
    );
}

function Modal(props) {
  return (
    <div className="modal">
      <h2>{props.title}</h2>
      <p>{props.sub}</p>
      <p>상세내용</p>
    </div>
  )
}

//component유의사항 1)이름은 대괄호로 시작 2)return() 안은 하나의 태그로
//만약, div를 여러개 쓰고 싶다면 맨 위, 아래에 <>, </>를 넣자.
//component로 추천: 반복 출현하는 HTML, 자주 변경되는 UI, 다른 페이지를 만들 때
//component 단점: state 복잡해짐(변수의 범위 땜에), 
상위 component에서 만든 state 쓰려면 props 문법 이용

export default App;