[React]리액트 공부 - 블로그

2022 코딩애플 리액트 강의

📂설치

1. node.js와 vscode 설치
2. 새로운 폴더 생성
3. 폴더 누르고 shift+우클릭 후 powershell창 열기
4. ‘npx create-react-app 프로젝트명’ 입력

※오류났을 때※

허가되지 않은 스크립트 : powershell 관리자 권한으로 실행 → powershell창에 ‘Set-ExecutionPolicy Unrestricted’ 입력

---

📂시작

1. vscode에서 폴더열기
2. 터미널에서 ‘npm start’ 입력 → 미리보기 뜸

---

📂폴더 설명

폴더명	설명
node_modules	라이브러리 코드 보관함
public	static 파일 모아놓는 곳
src	코드짜는 곳
package.json	프로젝트 정보

---

📂JSX

정의

• .js 파일에서 쓰는 html 대용품
  문법

1. 클래스 넣을때 className
   (js에 class라는 문법이 있기 때문)
2. 변수 넣을 땐 {중괄호}
3. style 넣을 땐 style={ {color:’red’, fontSize : ‘16px’} }

---

📂state

사용법

1. import { useState } from ‘react’;
2. useState(보관할 자료)
3. let [작명1, 작명2] = useState(보관할 자료)

   작명1 : state에 보관했던 자료 나옴
   작명2 : state 변경도와주는 함수

특징

• state는 변경되면 state 쓰던 html은 자동 재렌더링 됨

예시

let [좋아요, set좋아요] = useState(0);

<h4>
  <span
    onClick={() => {
      set좋아요(좋아요 + 1);
    }}
  >
    👍
  </span>{" "}
  {좋아요}
</h4>;

state가 array/object 일때

let [글제목, set글제목] = useState([
  "남자 코트 추천",
  "강남우동맛집",
  "파이썬독학",
]);

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

---

📂component

사용법

1. function 만들기
2. return() 안에 html 담기
3. <함수명></함수명> 쓰기

사용 용도

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

---

📂modal

동적 UI 만드는 방법

1. html css로 미리 디자인 완성

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

2. UI의 현재 상태를 state로 저장

let [modal, setModal] = useState(false);

3. state에 따라 UI가 어떻게 보일지 작성

<div className="list">
  <h4
    onClick={() => {
      setModal(!modal);
    }}
  >
    {글제목[2]}
  </h4>
  <p>2월 19일 발행</p>
</div>;

{
  modal == true ? <Modal /> : null;
}

html 중간 { }안에 if문 못 씀
삼항연산자 사용
조건문 ? 참 일때 코드 : 거짓일 때 코드

---

📂map

html 중간 { }안에 for문 못 씀
map 함수 사용

{
  글제목.map(function (a, i) {
    return (
      <div className="list">
        <h4>{글제목[i]}</h4>
        <p>2월 17일 발행</p>
      </div>
    );
  });
}

1. array 자료 개수만큼 함수 안의 코드 실행해줌
2. 함수의 파라미터는 array안에 있던 자료임
3. return에 뭐 적으면 array로 담아줌
4. i는 반복문 돌 때마다 0부터 1씩 증가하는 함수

---

📂props

부모 → 자식 state 전송하는 법

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

function App() {
  let [title, setTitle] = useState(0);

  return (
    <div className="App">
      {글제목.map(function (a, i) {
        return (
          <div className="list" key={i}>
            <h4
              onClick={() => {
                setModal(!modal);
                setTitle(i);
              }}
            >
              {글제목[i]}
              <span
                onClick={() => {
                  set좋아요(좋아요 + 1);
                }}
              >
                👍
              </span> {좋아요[i]}
            </h4>
            <p>2월 17일 발행</p>
          </div>
        );
      })}
      {modal == true ? <Modal color="yellow" 글제목={글제목} /> : null} //부모
    </div>
  );
}

function Modal(props) {
  return (
    <div className="modal" style=>
      <h4>{props.글제목[props.title]}</h4> //자식
      <p>날짜</p>
      <p>상세내용</p>
      <button
        onClick={() => {
          props.set글제목(["여자 코트 추천", "강남우동맛집", "파이썬독학"]);
        }}
      >
        글수정
      </button>
    </div>
  );
}

부모 : App
자식 : Modal

---

📂input

function App() {
  let [입력값, set입력값] = useState("");

  return (
    <input
      onChange={(e) => {
        set입력값(e.target.value);
      }}
    ></input>
  );
}

배열.unshift(내용); -> 배열 제일 앞에 내용 추가
배열.splice(0, 1); -> 배열 0번째 내용 삭제

📂배포

1. 터미널에 ‘npm run build’ 입력 -> build 폴더 생성됨
2. repository에 build 폴더 안의 파일을 전부 업로드(build 폴더 업로드 X)