자바스크립트 기초와 간단한 리액트 프로젝트 탐구
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
자바스크립트와 리액트 초보 개발자, 프론트엔드 개발 기초 학습자
핵심 요약
- 함수 선언 vs 표현식:
function
키워드로 정의된 함수는 호이스팅되지만,const
로 할당된 함수 표현식은 호이스팅되지 않음 - 호이스팅 메커니즘:
var
변수는 초기화 없이,let/const
는 "데드 존" 상태로 호이스팅됨 - 함수 조합:
compose
함수를 통해add
와multiply
를 결합해 모듈러한 코드 구현 - 리액트 프로젝트:
useState
와 삼항 연산자로 라이트 토글 기능 구현
섹션별 세부 요약
1. 함수 선언 vs 표현식
function sayHello()
는 호이스팅되어 선언 전 호출 가능const greet = function()
은 호이스팅되지 않아 선언 전 호출 시 에러 발생var
변수는 초기화 없이 호이스팅,let/const
는 초기화되지 않음
2. 호이스팅 메커니즘
- 함수 선언은 정의와 함께 호이스팅
var name = "Ramesh"
는undefined
로 출력sayHi()
는 호이스팅되어 실행 가능
3. 함수 조합(Function Composition)
add(x) => x+2
와multiply(x) => x*3
을compose
로 결합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
사용 시 주의해야 함