AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

자바스크립트 기초와 간단한 리액트 프로젝트 탐구

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

자바스크립트와 리액트 초보 개발자, 프론트엔드 개발 기초 학습자

핵심 요약

  • 함수 선언 vs 표현식: function 키워드로 정의된 함수는 호이스팅되지만, const로 할당된 함수 표현식은 호이스팅되지 않음
  • 호이스팅 메커니즘: var 변수는 초기화 없이, let/const는 "데드 존" 상태로 호이스팅됨
  • 함수 조합: compose 함수를 통해 addmultiply를 결합해 모듈러한 코드 구현
  • 리액트 프로젝트: useState와 삼항 연산자로 라이트 토글 기능 구현

섹션별 세부 요약

1. 함수 선언 vs 표현식

  • function sayHello()는 호이스팅되어 선언 전 호출 가능
  • const greet = function()은 호이스팅되지 않아 선언 전 호출 시 에러 발생
  • var 변수는 초기화 없이 호이스팅, let/const는 초기화되지 않음

2. 호이스팅 메커니즘

  • 함수 선언은 정의와 함께 호이스팅
  • var name = "Ramesh"undefined로 출력
  • sayHi()는 호이스팅되어 실행 가능

3. 함수 조합(Function Composition)

  • add(x) => x+2multiply(x) => x*3compose로 결합
  • compose(multiply, add)(5)(5+2)*3 = 21
  • 코드 재사용성과 모듈화를 위한 핵심 기법

4. 리액트 프로젝트 구현

  • useState 훅으로 isOn 상태 관리
  • 삼항 연산자 isOn ? 'Turn OFF' : 'Turn ON'으로 UI 상태 전환
  • 간단한 라이트 토글 컴포넌트 구현 예시:
  • import React, { useState } from 'react';
    function LightToggle() {
      const [isOn, setIsOn] = useState(false);
      return (
        {isOn ? 'Turn OFF' : 'Turn ON'}
      );
    }
    export default LightToggle;

결론

  • 함수 조합을 통해 코드 재사용성을 높이고, 리액트에서 상태 관리는 useState와 삼항 연산자를 활용하는 것이 효과적
  • 호이스팅 메커니즘을 이해해 var/let/const 사용 시 주의해야 함