반응형

react 검색 결과

해당 글 3건

3일차 useRef

React의 useRef는 함수형 컴포넌트 내에서 렌더링에 영향을 주지 않으면서 변경 가능한(mutable) 값을 저장할 수 있게 해주는 React Hook입니다.useRef는 다음과 같은 두 가지 주요 목적을 위해 사용됩니다.1. DOM 요소에 직접 접근할 때 React는 일반적으로 선언적인 방식으로 DOM을 조작하지만, 특정 상황(예: 포커스 설정, 스크롤 위치 조작, 특정 DOM 요소의 크기 측정 등)에서는 직접적인 접근이 필요합니다. 이때 useRef를 사용합니다. ref를 생성한 후, JSX 요소에 ref={myRef} 속성을 추가하면, 해당 DOM 요소의 인스턴스가 myRef.current에 할당됩니다.예시: 버튼 클릭 시 input 창에 자동으로 포커스를 주는 기능 구현. 2. 렌더링과 독립..
카테고리 없음 2025. 11. 16. 21:22

#1 새로운 React 앱 만들기

새로운 React 앱을 만드는 가장 현대적이고 공식적으로 권장되는 방법은 Vite와 같은 빌드 도구를 사용하는 것입니다. create-react-app(CRA)은 공식적으로 지원 중단되었으므로 새 프로젝트에는 권장되지 않습니다. 다음은 권장되는 단계입니다. 전제 조건 Node.js 설치: 시스템에 Node.js가 설치되어 있어야 합니다. 터미널(명령 프롬프트)에서 node -v 및 npm -v 명령어로 설치 여부 및 버전을 확인할 수 있습니다. Vite를 사용하여 React 앱 만들기 (권장) Vite는 더 빠르고 효율적인 개발 경험을 제공합니다. 터미널 열기: 원하는 프로젝트 폴더로 이동하여 터미널 또는 명령 프롬프트를 엽니다. 생성 명령어 실행: 다음 명령어 중 하나를 입력하고 실행합니다. 프..
카테고리 없음 2025. 11. 8. 18:20

1일차 리액트(React) 개발 환경 세팅

안녕하세요! 새로운 리액트 프로젝트를 시작하기 위한 개발 환경 설정 과정을 단계별로 정리했습니다. Visual Studio Code(VS Code) 설치부터 필수 확장 프로그램, 라이브러리 설치까지 한 번에 따라오실 수 있도록 구성했습니다.1단계: 개발 도구 설치 및 준비리액트 개발을 위해 먼저 필요한 도구들을 설치합니다.1. Visual Studio Code (VS Code) 설치가장 널리 사용되는 코드 에디터인 VS Code를 설치합니다.VS Code 공식 홈페이지에서 다운로드2. 필수 VS Code 확장 프로그램 설치개발 효율을 높여주는 유용한 확장 프로그램들입니다.ESLint: 코드에서 문법적 오류를 찾아주고 코딩 스타일을 일관되게 유지하도록 돕습니다.Prettier ESLint: 코드를 자동으로..
Spring & React 2025. 11. 5. 17:34
반응형