Coding 공부/React3

• [React] Router 예제 import './App.css'; // App 컴포넌트의 스타일을 가져옵니다.import { BrowserRouter, Routes, Route } from 'react-router-dom'; // react-router-dom 라이브러리에서 필요한 컴포넌트를 가져옵니다.import Home from './components/Home'; // Home 컴포넌트를 가져옵니다.import Search from './components/Search'; // Search 컴포넌트를 가져옵니다.function App() { // App 컴포넌트를 정의합니다. return ( {/* BrowserRouter: HTML5 히스토리 API를 사용하여 URL을 관리하는 최상.. Coding 공부/React 2024. 6. 10.

• [React] 컴포넌트 key, Props와 State, 조건부 렌더링 7가지 방법, Person 추가 및 삭제 및 수정 코드 1. 컴포넌트 key 설정Warning: Each child in a list should have a unique "key" prop.컴포넌트마다 고유한 키를 설정해줘야한다. 무시해도되는 오류지만 이후 코드가 복잡해질 경우 고려해야될 사항이다.render(){ const result = this.state.personList.map( (data)=>() ) return( {result} ) }Person 컴포넌트에 key 키워드를 추가해주면 해결된다.(컴포넌트를 구분해주는 역할로 사용 됨)  2. Props, State 예제코드 2.1 주요 개념 정리Props(속성): 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하는 방법.. Coding 공부/React 2024. 5. 27.

• 

  [React] 리액트 설치 및 실행, js파일 및 css 파일 리액트 연결, Hook, 리스트 렌더링 1. 리액트 설치 및 실행$npm install -g create-react-app$npx create-react-app react-practice리액트를 react-practice 폴더에 설치한다.$cd react-practice$npm startreact-practice 폴더로 디렉터리 이동한다.react를 실행한다.자동으로 http://localhost:3000/ 에 접속한다.새로운 프로젝트를 시작하려면 $npx create-react-app react-practice2 와 같이 새로운 디렉토리에 react를 설치해줘야한다.(Node.js, express와 비슷함)  리액트 튜토리얼 시작하기 이론 링크 : https://reactjs-kr.firebaseapp.com/tutorial/tutorial.. Coding 공부/React 2024. 5. 20.