반응형 분류 전체보기68 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 75 (인풋 이벤트 핸들링, 제어 vs. 비제어, 배열 상태 관리) 목차인풋 이벤트 핸들링제어 vs. 비제어배열 상태 관리오늘 하루를 돌아보며 인풋 이벤트 핸들링리액트에서 인풋 요소의 값은 컴포넌트의 상태(state)와 연결하여 관리한다. 이렇게 하면 사용자의 입력이 상태에 즉시 반영되어 UI가 동기화된다.입력과 상태 연결: input 요소의 value 속성에는 상태 값을, onInput 또는 onChange 속성에는 상태를 업데이트하는 핸들러 함수를 연결해야 한다.리액트의 onChange: 웹 표준 change 이벤트와 달리, 리액트의 onChange 이벤트는 사용자가 입력할 때마다 실시간으로 발생하여 즉시 상태를 업데이트한다. 제어 vs. 비제어인풋 요소를 상태와 연결하는 방식에 따라 제어 인풋(Controlled Input)과 비제어 인풋(Uncontrolled I.. 2025. 8. 20. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 74 (함수형 컴포넌트의 상태, 상태를 끌어올려 공유) 목차함수형 컴포넌트의 상태상태를 끌어올려 공유오늘 하루를 돌아보며 함수형 컴포넌트의 상태함수형 컴포넌트의 상태(State) 관리함수형 컴포넌트는 useState 훅을 사용하여 상태를 관리한다. useState는 배열을 반환하며, 첫 번째 값은 현재 상태 값, 두 번째 값은 상태를 업데이트하는 함수다. 배열 구조 분해 할당을 사용하면 아래와 같은 형태로 간편하게 선언할 수 있다.const [state, setState] = useState(초기값) 상태 업데이트와 렌더링상태를 업데이트하려면 setState 함수에 새로운 값을 전달해야 한다. setState가 실행되면 리액트는 해당 컴포넌트를 다시 렌더링한다. 리액트의 렌더링 과정은 다음 3단계로 이루어진다.렌더 트리거: 초기 렌더링이 일어나거나 setSt.. 2025. 8. 19. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 73 (상태가 없는 컴포넌트, 상태가 있는 컴포넌트, 리액트 훅의 등장과 변화) 목차상태가 없는(Stateless) 컴포넌트상태가 있는(Stateful) 컴포넌트리액트 훅의 등장과 변화오늘 하루를 돌아보며 상태가 없는(Stateless) 컴포넌트컴포넌트는 상태(state) 보유 여부에 따라 구분할 수 있다. 상태가 없다면 상태 없는 컴포넌트(Stateless Component) 또는 프레젠테이셔널 컴포넌트(Presentational Component)로 구분할 수 있고, 상태가 있다면 상태 있는 컴포넌트(Stateful Component) 또는 컨테이너 컴포넌트(Container Component)로 구분할 수 있다. 상태 없는(Stateless) 컴포넌트는 시각적 표현에 집중하는 컴포넌트로 스타일 정보만 포함하여 UI 화면을 렌더링하는 역할을 담당한다. 이 컴포넌트는 복잡한.. 2025. 8. 18. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 72 (리액트 빌드 환경 구성, 리액트 프로젝트 템플릿 구성) 목차리액트 빌드 환경 구성리액트 프로젝트 템플릿 구성오늘 하루를 돌아보며 리액트 빌드 환경 구성Bun 올인원 런타임 환경을 기반으로 다양한 개발 도구들을 직접 설정하고 효과적으로 활용하는 방법을 학습했다. Bun은 패키지 매니저, 번들러, 테스트 러너 등 다양한 기능을 하나의 런타임에 통합하여 복잡한 개발 환경을 간결하게 구성할 수 있도록 도와준다. Bun은 자바스크립트 실행 환경에서 Node.js보다 매우 빠른 성능을 제공한다. 만얄 Vite 빌드 도구를 선호한다면 Vite 환경에서 Bun을 사용할 수도 있다. 빌드 환경을 구성하기 위해서 React와 ReactDOM을 설치하고, JavaScript가 아닌 모듈을 불러오고, 타입 정의 파일을 설치했다. VSCode 인텔리센스를 구성하고 Prettier도.. 2025. 8. 18. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 71 (리액트 JSX 구문 확장, 선언적 vs. 명령형 프로그래밍, 바닐라 리액트의 한계) 목차리액트 JSX 구문 확장선언적 vs. 명령형 프로그래밍바닐라 리액트의 한계오늘 하루를 돌아보며 리액트 JSX 구문 확장바닐라 리액트만으로 마크업을 생성하는 것은 불편하고 번거로운 일이다. 리액트 팀은 마크업을 더 쉽고 편리하게 설명할 수 있도록 JSX를 만들었다. JSX는 리액트에서 마크업을 표현할 때 널리 사용되는 XML과 유사한 자바스크립트 문법 확장이다. 실제 리액트 앱 개발에서는 특별한 경우를 제외하고 대부분 JSX를 사용한다.// React API + JavaScriptconst box = React.createElement( Box, {}, shouldShowAnswer(user) ? React.createElement( Answer, { val.. 2025. 8. 13. 이전 1 2 3 4 5 6 ··· 14 다음 반응형
