React (20) 썸네일형 리스트형 [React] state의 값을 변경하고 렌더링 시켜보자. import React, { useState } from 'react'; // useState를 사용하기 위해 import import './App.css' function App(){ let [글제목, 글제목변경] = useState( ['남자 코트 추천', '강남 우동 맛집'] ); // state를 destructuring으로 지정 return ( 개발 blog { 글제목[0] } // 위 글제목에서 [0] 인덱스가 출력 2월 17일 발행 { 글제목[1] } 위 글제목에서 [1] 인덱스가 출력 2월 17일 발행 ) } state 값을 변경하고 렌더링 시키는 방법 위 코드에서 '남자 코트 추천'을 여자 코트 추천으로 변경하고 싶다. function 제목바꾸기() { let newArray = 글제목;.. [React] state 사용법 및 사용하는 이유 import React, { useState } from 'react'; // useState를 사용하기 위해 import import './App.css' function App(){ let [글제목, 글제목변경] = useState( ['남자 코트 추천', '강남 우동 맛집'] ); // state를 destructuring으로 지정 return ( 개발 blog { 글제목[0] } // 위 글제목에서 [0] 인덱스가 출력 2월 17일 발행 { 글제목[1] } 위 글제목에서 [1] 인덱스가 출력 2월 17일 발행 ) } 먼저 위 코드를 입력하고 구동시키면 useState로 데이터 바인딩을 한 결과를 볼 수 있다. state에는 Array, Object 어떤 타입이든 대입할 수 있다. 변수 말고 sta.. [React] JSX 문법과 데이터 바인딩 본격적으로 리액트를 이용해 HTML 페이지를 개발해보자. 그러기 위해선 리액트에서 HTML 대신 이용하는 JSX 라는 문법을 사용하여야한다. 생긴건 HTML과 유사한데, 유의점이 몇개 있다. React를 프로젝트 셋팅이 완료되었으면 App.js로 들어가보자. App.js가 메인페이지 역할을 하는 파일이다. App.js를 잘 보면 div가 여러개 등장하는 HTML 부분이 있다. 필요없는 HTML 내용들은 다 지우고 div 하나만 남기고 시작해보자. import logo from './logo.svg'; import './App.css'; function App() { return ( // 코딩할 공간 ); } export default App; 코딩을 하기전에 먼저 Visual Code를 세팅해주어야 한다.. [React] React 간단하게 프로젝트 설치 방법 1. Node.js 설치 및 에디터 설치 (nodejs.org/ko/), (code.visualstudio.com/) 2. 프로젝트를 작업할 폴더 생성 3. Visual Code 실행 후 터미널에 아래에 입력 npx create-react-app 설치할 디렉토리명 4. 설치한 프로젝트를 확인하려면 아래 명령을 터미널에 입력 npm start 이전 1 2 3 다음
