TIL#31

박감자·2024년 10월 30일

TIL

목록 보기

31/34

JS가 나쁘지 않았던 것 같아

-돌아온 React에 어지러운 박감자-

리액트 강의 2주차 (남은 강의)

이전 TIL에 제대로 다 쓰지도 않고 알고리즘 풀이로 넘어갔었지.....

뭔가 React-Native와 유사하면서도 어질어질한데.... 아니면 원래 이랬나???

개발 환경

CRA : Creaate Ract App, 다양한 자원을 프로젝트 생성시 같이 제공
Vite : CRA 보다 작은 번들의 지원하지만 작기 때문에 속도에서 빠르다

배워본 개발환경 세팅은 CRA와 Vite 이 중 Vite가 더 빠른 세팅을 지원하고 있다.

문제가 있다면 지금 당장 내 노트북의 문제 혹은 인터넷 문제인것 같은데, 내 환경에서는 Vite마저 조금 시간이 걸린다. CRA보다는 빠르기 때문에 일단은 괜찮지만 팀 프로젝트시 걱정이 좀 된다.

프로젝트 생성

CRA의 경우
yarn create react-app [프로젝트 이름]
cd [프로젝트 이름]
yarn start

Vite의 경우
yarn create vite my-react-app --template react
cd my-react-app
yarn
yarn dev

Component & .jsx

Component : 블록과 클라스 사이 개념 어딘가, 뜻 그대로 페이지를 이루는 component를 담는 것
.jsx : 컴포넌트를 담는 파일, JS와 유사하면서도 반환하는 것은 Virtual DOM이다.

클라스처럼 생각하면 편한부분은 부모-자식 관계가 있다는 점이다. 예를 들면

// Farm.js
import React from "react";

function Potato() {
  return <div>수확 성공!!</div>;
}

function Seed() {
  return <Potato />;
}

function Farm() {
  return <Seed />;
}

export default Farm;

여기서 Seed(Parent) 컴포넌트에서 Potato(Child)를 부르고 있는 관계가 성립한다. Potato에서 보이는 것처럼 JS 파일과는 다르게 요소를 반환하는 것이 .jsx 파일이다.

Props

부모와 자식간의 매개변수 전달 같은 느낌의 정보 교환은 props를 통해 이루어진다.

단! 전달은 부모에서 자식 방향으로만 가능하며 자식이 부모에게 정보를 줄 수는 없다.

부모에서 자식 (Parent -> Child) 전달 방법

import React from "react";

function Potato() {
  return <div>수확 성공!!</div>;
}

function Seed() {
  const breed = "GM 감자";
  return <Potato breed={breed}/>;	// breed라는 값을 props로 전달함!
}

function Farm() {
  return <Seed />;
}

export default Farm;

자식이 받는 방법
방법은 크게 3가지로 먼저 첫번째 props가 있다.

function Potato(props) {
  // GM 감자 수확 성공 div 생성
  return <div>{props.breed} 수확 성공</div>;	 
}

function Seed() {
  // breed라는 값을 props로 전달함!
  const breed = "GM 감자";
  return <Potato breed={breed}/>;	
}

두번째는 children으로 아래와 같은 상황에 적합하다. (Layout과 자주 사용)

function Potato(props) {
  // 왕 감자 수확 성공 div 생성
  return <div>{props.children} 수확 성공</div>;
}

function Seed() {
  // "왕 감자"라는 값을 props.children로 전달함!
  return <Potato>왕 감자</Potato>;	
}

마지막 세번째는 props를 구조분해 하는 것

function Potato({children, size}) {
  // Large (라지) 사이즈의 햇감자 수확 성공 div 생성
  return <div> {size} 사이즈의 {children} 수확 성공</div>;	 
}

function Seed() {
  // breed라는 값을 props로 전달함!
  const size = "Large (라지)";
  return <Potato size={size}>햇감자</Potato>;	
}

추가사항) Default 값 지정
만약에 들어온 값이 없는 경우 default값을 지정할 수 있다.

function Potato({ breed = "수미감자"}) {
  // 없을 경우 수미감자 수확 성공 div 생성
  return <div> {breed} 수확 성공</div>;	 
}

State

컴포넌트 내부에서 바뀔 수 있는 값을 state라고 하며 사용 방법은 아래와 같다

import React, { useState } from "react";

function Farm() {
  const [seeds, setSeeds] = useState("품종개량1");
  return (
    <Seed breed={seeds}/>
  	<button onClick = {() => {
        setSeeds([...seeds], "품종개량2");      
      }}>심기</button>
  );
}