[React] Component, Props, State (2023.05.16)

terminal 명령어

npm : 이미 설치가 되어있을 아이를 사용할 때 (ex. terminal start)

npx : 설치가 되어있지않는 것을 사용할 때 (ex. npx create-react-app project02)

종료 : ctrl + C

 

⚙ project 폴더 구성

node_modules : 필요한 장치들

public : 정적인 파일 / 이미지, html, json, text 등

src : js, css 등 동적으로 동적하기 위해 필요한 친구들

 

🎈 컴포넌트

리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트'라는 단위를 사용함

커다란 단위, 개발자가 커스텀할 수 있는 최소 단위 (기능별 혹은 페이지별로 만드는 경우가 많음)

내가 원하는 태그들을 모아서 하나의 단위로 만들어준다.

 

 

 

 

react 문법 작성시 유용한 도구

 

📖 컴포넌트 생성

컴포넌트는 폴더에 따로 관리 

 

 

컴포넌트 만들 때 꼭 대문자로 시작! - 리액트의 프레임워크적인 성격

(소문자로 시작하는 HTML 태그(DOM 요소)와 구분하기 위해!)

확장자는 js로 해도 상관 없음. 

 

수입(import), 수출(export default) 작업이 필수!

 

⚙ props

상위 컴포넌트에서 하위 컴포넌트로 값을 보내줄 때 사용

상위 컴포넌트에서는 속성 = "값"

                                  혹은 변수 만들어서 속성 = {변수}

하위 컴포넌트에서는 매개변수에 값을 받아왔다

받을 수 있는 Case1) 매개변수에 props => props.name

                     Case2) 매개변수에 {name, gender} => name ** 비구조화 할당 개념

 

 

객체 비구조화 할당

변수와 속성이름이 같다면 하나의 단어로 사용 가능

 

let props = {

    name=""

    price=""

}

let {name, price} = {

    name=""

    price=""

}

 

AppExample.js 파일에서 MemberBox 컴포넌트 끌어쓰기

// rafce(react arrow function export component) + Enter : 단축키

import React from "react";
import "./App.css";
import MemberBox from "./components/MemberBox";

const AppExample = () => {
  /* 여러분의 팀원을 소개해주세요!
이름 : 홍길동
성별 : 여성/남성
좋아하는 노래 :  아이브 - I AM

단, Component와 props의 개념을 이용할 것
- MemberBox 라는 컴포넌트를 생성하기

혹시, 너무 빨리 끝내버린 사람은 디자인하고 있기!
*/
  let { man, woman } = {
    man: "남성",
    woman: "여성",
  };
  return (
    <div>
      <MemberBox name="신지영" gender={woman} song="지수 - 꽃"></MemberBox>
      <MemberBox
        name="서현록"
        gender={woman}
        song="뉴진스 - Hypeboy"
      ></MemberBox>
      <MemberBox name="김신영" gender={man} song="뉴진스 - ditto"></MemberBox>
      <MemberBox
        name="영석"
        gender={man}
        song="아이유 - 잠못드는밤에비는내리고"
      ></MemberBox>
    </div>
  );
};

export default AppExample;

 

MemberBox 컴포넌트

const MemberBox = ({name, gender, song})=>{
    return(
        <div className="member-box">
        <div id="name">{name}</div>
        <div>{gender}</div>
        <div>{song}</div>
        </div>
    )
}

export default MemberBox

 

내가만든 컴포넌트에는 직접적으로 디자인을 입힐 수 없음

컴포넌트 내 html 요소에 디자인을 주면 됨

 

⚙ state

 

변화가 있으면 화면에 바로 렌더링 해줘야 할 때 사용

 

 

import {useState} from 'react'
const [변수이름, set변수이름] = useState(초기값)

 

import React from "react";
import { useState } from "react";

const Ex01 = () => {
  /* React Event
  1. onClick = {함수이름}
      이때, JS처럼 ()를 뒤에 붙이면 바로 호출
      {()=>{함수이름()}} 도 사용 가능
  
  2. DOM 요소에만 이벤트를 걸어줄 수 있따. 
    내가 만든 컴포넌트에는 이벤트를 걸 수 없음
  */

  /* State
  - 컴포넌트 내부에서 관리하는 변경이 가능한 데이터
  - 변수와 다른점? 화면에 렌더링된다는 점
    JS에서 값이 변하는 과정을 생각하면 마지막에 화면에 렌더링을 시켜줘야 함
    => useState라는 함수를 사용해줄것!
    
    const [변수이름, set변수이름] = useState(초기값)
    - 변수이름
    - set변수이름 : 변수이름을 수정해야할 때 사용할 함수 이름
                    num = 2(X)    => 변수만 바뀜, 화면은 그대로
                    setNum(2) (O) => 화면까지 같이 값이 변화
    - useState : import 작업이 필요함
                  import {useState} from 'react'
  */

  let num = 0;
  const [num2, setNum2] = useState(0);

  const plus = () => {
    num += 1;
    console.log("현재 숫자는 : ", num);

    setNum2(num2 + 1);
  };

  const minus = () => {
    setNum2(num2 - 1);
  };

  return (
    <div>
      <p>단순 변수 : {num}</p>
      {/* 화면 랜더링까지 이어지지 않음 -> useState() 사용하는 이유 */}
      <p>state : {num2}</p>
      <button onClick={plus}>+1</button>
      {/* 소괄호를 쓰게되면 페이지가 실행될때마다 자동으로 함수가 호출됨 */}
      <button
        onClick={() => {
          setNum2(num2 - 1); 
          // 익명함수
        }}
      >
        -1
      </button>
    </div>
  );
};

export default Ex01;

 

오류 관련 정리

 

리액트는 3000 포트 사용

이 경우 서버가 2개 돌아가는 중 (오른쪽 node 2개)

실행중인 서버를 종료하거나 (Ctrl + C)

혹은 Y를 눌러서 새로운 포트로 새로운 서버를 실행하거나