환경설정

원하는 위치에 새 폴더 하나를 만든 뒤 shift+우클릭 누른다.

여기에 PowerShell 창 열기를 누르고 powershell을 켠다.


npx create-react-app 프로젝트명 입력 후 엔터를 누르고 y를 입력한 다음 위 사진 두개처럼 뜬다면 설치는 끝이다.

vsCode를 켜고 만들어놓은 폴더를 불러오기 한다. 불러오기 했을 때 프로젝트명이 제대로 잘 떠야 한다.
미리보기 띄우기는 Terminal -> New Terminal => 터미널에서 npm start 입력.

• node_modules - 라이브러리 코드 보관함
• public - static 파일 모아놓은 곳
• src - 코드를 짜는 곳
• App.js - 메인 페이지
• package.json - 프로젝트 정보
  
  
  이렇게 뜬다면 미리보기 띄우기 성공!

리액트에서 <div> 만드는 법

React.createElement('div', null, 'Hello World')
JSX 사용해서 <div></div>로 쓸 수 있다.

JSX 문법

1. class 넣을 땐 class가 아닌 className으로 적는다.
2. css 파일을 쓰려면 상단에 import '파일경로';를 적는다.
3. 변수를 넣을 땐 {중괄호}라고 적는다.
4. 스타일 넣을 땐 style={{스타일명:'값'}}라고 적는다.
5. return() 안에는 병렬로 태그 2개 이상 기입 금지.
6. 자료 잠깐 저장할 때 변수 -> state
   -state 사용법
   1) import { useState } from 'react';
   2) useState(보관할 자료)
   3) let [작명1, 작명2] -> 작명1: state에 보관했던 자료가 나옴. 작명2: state 변경 도와주는 함수
   -state를 쓰던 html은 자동 재렌더링이 된다. 그래서 변동시 자동으로 html에 반영되게 만들고 싶다면 state를 사용하면 편리하다.
7. Destructuring 문법 -> let [a, c] = [1, 2];

warning 메세지 끄는 법

/* eslint-disable */ -> Lint 끄는 기능.

좋아요 버튼 & 갯수 UI 만들기

onClick={}안에 함수 이름을 넣어야 한다.

state 변경하는 법

등호로 변경 금지!
state변경함수(새로운 state)

/* 좋아요 버튼 */
  let [like, likeChange] = useState(0);
/* 싫어요 버튼 */
  let [unlike, unlikeChange] = useState(0);

  return (
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>
       <div className="list">
            <h4>
              {title[0]}{" "}
              
              /* 좋아요 버튼 */
              <span
                onClick={() => {
                  likeChange(like + 1);
                }}
              >
                👍
              </span>
              {like}

			  /* 싫어요 버튼 */
              <span
                onClick={() => {
                  unlikeChange(unlike + 1);
                }}
              >
                👎
              </span>
              {unlike}
            </h4>

array, object state 변경하는 법

state 변경함수 특징

기존 state == 신규 state의 경우에는 변경을 안 해준다.
array/object 담은 변수에는 값이 어디 저장되어 있는지 알려주는 화살표만 저장된다. 그래서 let copy = title; 이 코드의 copy에는 title에 있던 화살표가 복사되기 때문에 내용이 바뀌지 않는다.
변수1 & 변수2의 화살표가 같으면 변수1 == 변수2를 비교해도 true가 나온다.
state가 array/object일 땐 copy를 만들어서 수정해야 한다.

      <button
        onClick={() => {
          let copy = [...title];
          copy[0] = "코딩 공부하는 중";
          titleChange(copy);
        }}
      >
        수정
      </button>

array, object는 reference data type이기 때문이다.

[...title]은 괄호를 벗겨달라는 의미이다.

Component 문법

컴포넌트 만드는 방법

1. 다른 function 밖에다가 function 만들기 함수 이름은 "대문자"
2. return() 안에 html 담기 => 하나의 <div></div>만 쓸 수 있다.
3. <함수명></함수명> 쓰기
4. 의미없는 <div></div> 대신에 <></> 쓸 수 있다.

어떨 때 컴포넌트를 사용하는지?

1. 반복적인 html을 축약할 때 사용한다.
2. 큰 페이지들
3. 자주 변경되는 것들

컴포넌트의 단점

1. state를 가져다 쓸 때 문제 생긴다.
   (A 함수에 있던 변수는 B 함수에서 맘대로 가져다 쓸 수 없다.)

동적인 UI 만들기

1. html/css로 미리 디자인을 완성한다.
2. UI의 현재 상태를 state로 저장한다.
3. state에 따라서 UI가 어떻게 보일지 작성한다.(조건문 등으로)
   -> if문 대신에 삼항연산자(ternary operator) 사용한다.
   삼항연산자: 조건식 ? 참일 때 실행할 코드 : 거짓일 때 실행할 코드

map : 많은 div들을 반복문으로 줄이기

[array, array, array].map(function() {
	return '123456789';
});

      {title.map(function (a, i) {
        // a => array 안에 있던 데이터
        // i => 반복문 돌 때마다 0부터 1씩 증가하는 정수
        return (
          <div className="list">
            <h4
              onClick={() => {
                setModal(true);
              }}
            >
              {title[i]} <LikeUnlike />
            </h4>
            <p>2월 17일 발행</p>
          </div>
        );
      })}

1. array 자료 갯수만큼 함수 안의 코드 실행해준다.
2. 함수의 파라미터는 array 안에 있던 자료다.
3. return에 자료를 작성하면 array로 담아준다.
4. 유용한 파라미터 2개 사용 가능하다.

자식이 부모의 state 가져다쓰고 싶을 때는 props

부모 -> 자식 state 전송하는 법

1. <자식컴포넌트 작명={state이름}>
2. props 파라미터 등록 후 props.작명 사용

input

HTML/CSS input
<input>에 입력한 값 가져오는 방법
<input onChange = {(e) => { console.log(e.target.value) }} />

• onChange => 뭔가 입력했을 때 코드 실행하고 싶을 때 사용한다.
• e => 지금 발생하는 이벤트에 관련한 여러 기능이 담겨있다.
• e.target => 이벤트 발생한 html 태그
• e.target.value => 이벤트 발생한 html 태그에 입력한 값

상위 html로 퍼지는 이벤트 버블링 막기

e.stopPropagation()

      <span
        onClick={(e) => {
          e.stopPropagation();
          likeChange(like + 1);
        }}
      >
        👍
      </span>
      {like}

비동기처리

state 변경함수는 늦게 처리된다.

      <input
        onChange={(e) => {
          입력값변경(e.target.value); // 1번. 이 코드가 처리되기 전에
          console.log(입력값); // 2번. 이 코드가 먼저 실행된다.
        }}
      />

댓글 추가

  let [text, textChange] = useState("");

	  <button
        onClick={() => {
          let copy = [...title];
          copy.unshift(text);
          titleChange(copy);
        }}
      >
        댓글쓰기
      </button>

• shift() - 배열 맨 앞의 값 삭제
• unshift(값) - 배열 맨 앞의 값 추가

댓글 삭제

      {title.map(function (a, i) {
        // a => array 안에 있던 데이터
        // i => 반복문 돌 때마다 0부터 1씩 증가하는 정수
        return (
          <div className="list" key={i}>
            <h4
              onClick={() => {
                setModal(true);
                setModalTitle(i);
              }}
            >
              {title[i]} <LikeUnlike />
            </h4>
            <p>2월 17일 발행</p>
            <button
              onClick={() => {
                let copy = [...title];
                <LikeUnlike />;
                copy.splice(i, 1); // 원하는 항목 삭제
                titleChange(copy);
              }}
            >
              삭제
            </button>
          </div>
        );
      })}