[유데미x스나이퍼팩토리] 10주 완성! 프로젝트 캠프 : React 2

m_ngyeong·2023년 6월 23일
IT개발캠프React개발자부트캠프리액트리액트캠프부트캠프스나이퍼팩토리웅진씽크빅유데미인사이드아웃프로젝트캠프프로젝트캠프후기
0

[유데미x스나이퍼팩토리] 10주완성 프로젝트 캠프 React

목록 보기
15/28
post-thumbnail

React

Node.js

Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임이다.
Non-blocking I/O(입출력)와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다.

Non-blocking I/O: 프로그램이 I/O 작업이 완료되기를 기다리는 동안 다른 작업을 계속 실행할 수 있도록 한다. 기다리는 대신 Node.js는 I/O 작업을 기본 시스템에 위임하고 완료 시 실행할 콜백을 등록한다. 이 비동기식 접근 방식을 통해 애플리케이션은 여러 작업을 동시에 처리할 수 있으므로 효율성과 응답성이 향상된다.

npm(Node Package Manager)

JavaScript 런타임 환경 Node.js의 기본 패키지 관리자이다.

  • Software Registry이며, Registry에 800,000개 이상의 코드 패키지가 포함되어 있음
  • 모든 npm 패키지는 package.json 파일에 정의되면 내용은 JSON 으로 작성해야 함

npx

npx은 모듈을 로컬에 저장하지 않고, 매번 최신 버전의 파일만을 임시로 불러와 실행 시킨 후에, 다시 그 파일은 없어지는 방식으로 모듈이 돌아간다. 즉, 모듈의 버전을 신경쓰지 않고 사용할 수 있다.

React App 설치 및 실행

  1. node.js 설치
    • 설치된 버전 확인 % node -v % npm -v
  2. react-app 설치 % npx create-react-app 원하는 파일 이름
  3. react 설치한 파일로 경로 이동 % cd 파일 이름
  4. react 실행 % npm start

*폴더명에 느낌표(!)가 포함되어 있으면 Failed to compile 가 발생한다.
느낌표(!)는 로더 구문용으로 예약되어 있어 허용되지 않는다.

Compoent

Compoents는 재사용 가능한 UI를 구축하는 기반이다.
React Compoents는 마크업을 뿌릴 수 있는 JavaScript 함수이다.

import React from 'react'; //리액트를 불러와 컴포넌트 생성

function Hello() {
  return <div>안녕하세요</div>
}

export default Hello; // 컴포넌트 내보내기

Step 1: Export the component

  • export default

Step 2: Define the function

  • function Hello() { } JavaScript 함수를 정의
  • React 구성 요소는 일반 JavaScript 함수이지만 해당 이름은 대문자로 시작해야 함

Step 3: Add markup

  • 태그를 반함
  • HTML처럼 작성되었지만 실제로는 JavaScript. 이 구문을 jsx(리액트 컴포넌트에서 xml 형식의 값을 반환해는 것)라고 하며 JavaScript 내부에 마크업을 삽입할 수 있음
  • return 한 쌍의 ()괄호로 묶어야 함

Props

props는 properties 의 줄임말이다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용한다.
단방향 데이터 흐름을 가지며, parent component는 수정 가능하지만, child components는 읽기만 가능하다.

사용법

import React from "react";

function Greeting(props) {
  return <p>hello, {props.name}</p>;
}

function Props() {
  return <Greeting name="Mingyenog" />;
}
export default Props;
  • 컴포넌트에게 전달되는 props는 파라미터를 통하여 조회할 수 있음
  • props는 객체 형태로 전달되며, 호출부와 이름이 동일해야 함
    만약 name 값을 조회하고 싶다면, props.name 을 조회하면 됨
  • <Avatar {...props} /> jsx 스프레드 구문으로 모든 props를 전달할 수 있지만 과도하게 사용하는건 추전하지 않음

비구조화할당

import React from "react";

function Greeting({ name }) {
  return <p>hello, {name}</p>;
}

function Props() {
  return <Greeting name="Mingyenog" />;
}
export default Props;
  • 컴포넌트의 파라미터에서 {}안에 받는 내용을 미리 표기
  • 함수의 파라미터로 사용 가능 function Avatar({ person, size })

Child Components에 props 전달

export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}
  • 모든 parent component에서 child components로 전달되는 읽기 전용 데이터

React Hooks - Functional Components

  • React에서 import 받아서 사용

useState

State란 컴포넌트가 가질 수 있는 상태를 말한다.
useState()는 컴포넌트 state(상태)를 생성하고 업데이트 할 수 있는 React Hook 메서드이다. 동적으로 바뀌는 값을 관리할 때 사용한다.

  • 두 가지 요소 [state, setState] 를 배열 형태로 반환 
import { useState } from 'react';
const [state, setState] = useState(initialState);
// = const [state, setState] = React.useState(initialState);

//example
import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); 
  //[값, 함수] = 초기값 - 실시간
  const countUp = () =>{
    setCount(count + 1)
  };
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count - 1)}>-1</button>
      <button onClick={countUp}>+1</button>
    </div>
  );
}
  • state 변수 : 현재 상태 값
  • setState() 메서드 : state의 값을 변경하고 값이 변경될 때마다 화면은 다시 랜더링 됌

Updating objects and arrays in state

You can put objects and arrays into state. React에서 state는 읽기 전용으로 간주되므로 기존 객체를 변경하는 대신 교체를 해야 한다. 새 객체를 만들어 전체 객체를 바꾼다.

// ✅ Replace state with a new object
setForm({
  ...form,
  firstName: 'Taylor'
});

useReducer

useReducer()는 useState()처럼 컴포넌트 state(상태)를 생성하고 업데이트 할 수 있는 React Hook 메서드이다.
여러 개의 하위 값을 포함하는 복잡한 state(상태)를 다루어야 할 때 사용한다.

  • 두 가지 요소 [state, dispatch] 를 배열 형태로 반환 
import { useReducer } from 'react';
const [state, dispatch] = useReducer(reducer, initialArg, init?);
// useReducer(reducer(), 초기 값, 초기 함수?);
                                     
//example
import { useReducer } from 'react';
                                     
function reducer(state, action) {
  if (action.type === 'incremented_age') {
    return {
      age: state.age + 1
    };
  }
  throw Error('Unknown action.');
}

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, { age: 42 });
  return (
    <>
      <button onClick={() => {
        dispatch({ type: 'incremented_age' })
          //action는 object형태로 전달
      }}>
        Increment age
      </button>
      <p>Hello! You are {state.age}.</p>
    </>
  );
}
  • state 변수 : 컴포넌트에서 사용할 상태, 현재 상태 값. e.g.거래내역
  • dispatch(action) 메서드: e.g.은행에게 거래내역 변경을 요구하는 행위
    • state를 업데이트를 위한 요구, action 객체를 인자로 받고 반환값은 없음
    • action을 이용하여 컴포넌트 내에서 state의 업데이트를 일으킴
  • action : 요구사항. e.g.만원을 출금해주세요
    • action 객체는 어떤 행동인지를 나타내는 type 속성과 해당 행동과 관련된 데이터(payload)를 담고 있음
  • reducer(state, action) 메서드 : e.g.은행
    • 상기 dispatch 함수에 의해 실행되며, 컴포넌트 외부에서 state를 업데이트 하는 로직을 담당
    • 함수의 인자로는 state와 action을 받게 됨
    • state와 action을 활용하여 새로운 state를 반환

useEffect

컴포넌트를 외부 시스템과 동기화할 수 있는 React Hook 메서드이다.
어떠한 컴포넌트가 Mount(화면에 첫 랜더링), Update(다시 랜더링), Unmount(화면에서 사라질 때), 특정 작업을 차리할 코드를 실행시켜 줄 때 사용한다.

  • useEffect(()=>{ }); : 랜더링이 될 때 마다 콜백이 실행 됌
  • useEffect(()=>{ },[value]); : 화면에 첫 랜더링이 될 때 + value값이 바뀔 때 실행 됌
import { useEffect } from 'react';
useEffect(()=>{
  //작업
  return () => {
    //작업 해지 : Clean UP 정리
  }
},[])
          
//example
import React, { useState, useEffect } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount((count) => count + 1);
    }, 1000);
    return () => {
      clearInterval(timer);
      console.log("clean up function works!");
    };
  }, []);
  return <p>{count}</p>;
}
  • 첫번째 파라미터 : 콜백함수(다른 함수의 파라미터로써 전달되는 함수)
  • 두번째 파라미터 : [], 배열(= dependencies)

참고문서,
node.js, https://www.cronj.com/blog/node-js-non-blocking-asynchronous-blocking-synchronous/#What_is_IO
react, https://react.vlpt.us/basic/ , https://react.dev/
react hook, https://youtube.com/playlist?list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO
https://goddaehee.tistory.com/311

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

profile
m_ngyeong
사용자 경험 향상과 지속적인 성장을 추구하는 프론트엔드 개발자 ʚȉɞ
이전 포스트

[유데미x스나이퍼팩토리] 10주 완성! 프로젝트 캠프 : 3주차 과제2️⃣

다음 포스트

[유데미x스나이퍼팩토리] 10주 완성! 프로젝트 캠프 : 3주차 과제3️⃣

0개의 댓글