프론트엔드/리액트 (12) 썸네일형 리스트형 리액트 훅 - 상태관리 (유즈 스테이트, 유즈 리듀서) 브라우저에 표시되는 정보는 일회성이고 해당 페이지에만 적용됩니다. 따라서, 페이지간에 정보를 주고받고 다른 페이지에서 수정된 정보를 표시하려면 공통된 상태를 관리하기 위해서는 서버 등을 이용하여야 하는데요. 리액트는 서버등을 사용하지 않고 상태를 관리하게 해 주는 다양한 훅들을 제공하는 데 어떻게 사용하는지 볼까요? HTML 삽입 미리보기할 수 없는 소스 리스트 표시하기 리스트를 동적으로 표면에 표시하는 방법을 보겠습니다. 리액트는 중괄호를 사용하여 템플릿 안에서 자바스크립트 코드를 작성할 수 있는 기능을 제공합니다. 해당 기능을 사용하여 동적리스트 요소를 만들어 보겠습니다 구현하기 리액트 앱 생성 리액트? 리액트는 자바스크립트 라이브러리로 앵귤러, 뷰와 함께 3대 자바스크립트 프레임워크 중 하나입니다. 앵귤러와 마찬가지로 컴포넌트 단위로 UI를 구성하는 방식을 사용하지만 앵귤러와 달리 jin-co.tistory.com 테스트를 위해 객체를 가진 배열생성 var items = [ {id: 1, name: 'pencil'}, {id: 2, name: 'eraser'}, {id: 3, name: 'brush'}, ] 요소 안에 중복으로 표시하고자 하는 요소를 중괄호로 감싸고.. 프로젝트 템플릿 만들기 리액트 애플리케이션을 생성하면 기본적으로 생성된 폴더들이 있는데요. 불필요한 폴더들을 삭제하고 기본 템플릿을 만들어 보겠습니다. 완성된 템플릿 불필요한 파일을 제거하고 완성된 템플릿은 아래와 같습니다 App.js function App() { return ( Test ) } export default App index.js import React, { StrictMode } from "react"; import ReactDOM from 'react-dom/client' import App from './App' import './index.css' const root = ReactDOM.createRoot(document.getElementById('root')) root.render( ) 앱 구조 먼저.. 리액트? 리액트는 자바스크립트 라이브러리로 앵귤러, 뷰와 함께 3대 자바스크립트 프레임워크 중 하나입니다. 앵귤러와 마찬가지로 컴포넌트 단위로 UI를 구성하는 방식을 사용하지만 앵귤러와 달리 상태관리 등의 기능을 자체적으로 탑재하고 있는 것이 아니라 다른 라이브러리를 사용하여 구현하기 때문에 사이즈가 작고 배우기 쉬운 장점이 있습니다.리액트 앱 만들기리액트 앱을 만드는 가장 간단한 방법은 아래 명령어를 사용하는 방법입니다. 커맨드라인을 열고 아래 명령어를 실행하면 필요한 구성과 함께 새로운 리액트 앱이 생성됩니다.npx create-react-app app-name생성된 앱으로 이동하여 편집기를 엽니다.cd app-namecode .구동하기커맨드라인을 열고 아래 명령어 실행npm start참고React – A J.. 이전 1 2 다음
