목록React (4)
코딩항해기

TypeScriptTypeScript는 Microsoft에서 개발한 JavaScript의 슈퍼셋 프로그래밍 언어다. JavaScript에 정적 타입을 추가하여 코드의 안정성과 가독성을 높여주며, 대규모 애플리케이션 개발에 특히 유용하다. 기본 타입 시스템TypeScript의 가장 큰 특징은 정적 타입 시스템이다. JavaScript의 동적 타입과는 달리, 변수와 함수의 타입을 명시적으로 선언할 수 있다. // 기본 타입 선언let name: string = "홍길동";let age: number = 25;let isStudent: boolean = true;let numbers: number[] = [1, 2, 3, 4, 5];let tuple: [string, number] = ["홍길동", 25];/..

React.memo()로 불필요한 리렌더링 방지함수형 컴포넌트에서 얕은 비교를 통해 불필요한 렌더링을 막을 수 있다.const MemoizedComponent = React.memo(MyComponent, (prevProps, nextProps) => { // 커스텀 비교 로직 구현 가능 return prevProps.value === nextProps.value;}); useMemo()로 복잡한 계산 최적화비용이 높은 계산을 메모이제이션하여 불필요한 재계산을 방지한다.const memoizedValue = useMemo(() => { return computeExpensiveValue(a, b);}, [a, b]); useCallback()으로 함수 재생성 방지매 렌더링마다 생성되는 함수를 캐싱하..

React 주요 특징컴포넌트 기반 아키텍처UI를 재사용 가능한 독립적인 컴포넌트로 분해한다. 선언적 문법상태에 따라 UI가 어떻게 보여야 하는지 선언한다. 효율적인 렌더링Virtual DOM을 통한 빠르고 최적화된 업데이트를 제공한다. 컴포넌트의 기본 구조함수형 컴포넌트 (Modern Approach)function Welcome(props) { return 안녕하세요, {props.name}님!;} 클래스형 컴포넌트 (Legacy Approach)class Welcome extends React.Component { render() { return 안녕하세요, {this.props.name}님!; }} React HooksReact 16.8 버전부터 도입된 Hooks는 함수형 컴포넌트에서..

리엑트 ReactReact는 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리이다. 컴포넌트 기반 구조로 UI를 효율적으로 업데이트하고, 상태(state) 관리와 가상 DOM을 사용하여 성능을 최적화한다. Facebook에서 개발되었다. mdn에서 설명하는 리엑트를 진행해볼 예정이다. React 시작하기 - Web 개발 학습하기 | MDN이 문서에서는 React를 소개합니다. 우리는 React에 대한 약간의 배경지식과 사용 예시, 로컬 컴퓨터에 React 툴체인을 설정하는 방법을 배우고 프로세스에서의 React 동작 원리를 배우기 위해서 간단developer.mozilla.org 환경 구성node.js와 visual studio code를 사용할 예정이므로 설치가 필요하다. No..