React 입문 - 컴포넌트 만들어보기 - 1

useState, useEffect

• useState 함수

  • [상태를 체크할 변수, 옆 변수의 변경시 수행할 기능] = useState(초기 시작 값)

  • 데이터를 저장하고 바꾸는 역할을 수행할 수 있음

    • 화면에 보여주는 데이터, 입력값, 토글 등 활용

• useEffect 함수

  • useEffect(함수, [변수])

  • 배열의 변수가 변경되면 인지하여 첫 인자의 함수를 실행함

    • API 호출, 용도, 타이머, 이벤트 리스너 등록, 값의 브라우저 등록 등 활용

  • 배열이 빈 값이면 최초 렌더링 시 한번 수행하는 것으로 끝

  • 배열 자체가 없으면 모든 요소가 변경시 매번 수행되어 버림

{ } 중괄호

• React의 JSX 내부에선 JS 코드를 사용하려면 { } 중괄호 내에서 사용해야함

선언법

import { useEffect, useState } from 'react'
import CustomCard1 from './component/CardCustomed_1.jsx'

• IDE 가 자동으로 useEffect, useState 같은 함수 사용시

  npm, npx 든 제대로 모듈들을 가져오기만 했다면 import는 알아서 해줌

• 컴포넌트를 만들어 메인 컴포넌트에 붙일 때는 호칭과 from 키워드로 가져와야함

• JSX 내부엔 하나의 Function, 하나의 export 만 있어야 올바른 JSX