Frontend/React (9) 썸네일형 리스트형 React-Router(△) https://jineecode.tistory.com/154 react-router-dom 다루기 1. 설치 : npm install react-router-dom 2. src/index.js 에 import. import { BrowserRouter } from "react-router-dom"; 3. ReactDOM 에 코드 ReactDOM.render( , document.getElementById("root") ); 와 의 큰.. jineecode.tistory.com 1. 설치 : npm install react-router-dom 2. App.js에 코드 작성 import { BrowserRouter as Router, Routes, Route, Link } from "react-router-.. 벨로퍼트 모던 리액트 https://react.vlpt.us/ 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us Props :어떠한 값을 컴포넌트에게 전달하고자 할때 사용 import React from 'react'; function Hello({ color, name }) { return 안녕하세요 {name} } export default Hello; 컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children 을 사용 import React from 'react'; function Wr.. map 자바스크립트 내장함수(배열을 가져와 변환하여 새로운 배열을 만들어줌) react에서는 api를 가져와 화면에 표시할때 사용 *반드시 Key라는 props를 설정해야함!* 보통 id로 정하며, 고유값이 없다면 index로 쓰기도함 {movies.map(movie => {movie.title} {movie.summary} {movie.genres.map(g => {g})} To Do List (Enrollent) 리액트로 To Do List 만들기 import { useState } from "react"; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if(toDo === ""){ return; } setToDos(currentArray => [toDo, ...currentArray]); setToDo(""); } return ( My To Dos ({toDos.length}) Add To Do.. useEffect useEffect( fn, [ deps ]) 1. deps가 빈배열일 때 처음에만 렌더링함. (리렌더링 하지 않음) 2. deps위치의 특정값이 변화할때만 렌더링함. +cleanup 함수 반환 import { useState, useEffect } from "react"; function App() { const [counter, setValue] = useState(0); const [keyword, setKeyworld] = useState("") const onClick = () => setValue((prev) => prev + 1); const onChange = (event) => setKeyworld(event.target.value); console.log("I run all the tim.. Props & memo 1. Props function Btn({text, big}) 에서 text, big은 Btn 컴포넌트에게 줄수있는 props(properties)이다. 여러개의 동일한 컴포넌트 생성 시 마크업이나 스타일을 재사용할 때 유용하다. // btn text : Save Changes, fontsize : 18 function Btn({text, big}) { return ( {text} ); } function App() { return ( ); } 2. React.memo 컴포넌트의 props가 바뀌지(changeValue) 않았다면, 리렌더링을 방지(두번째 Btn은 render되지않음)하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있다. 즉, 컴포넌트에서 리렌더링이 필요한 상황에서만 리렌더링을 하도록 설.. Unit Converter JSX란? 쉽게 말해 HTML 문법을 JavaScript 코드 내부에 쓴 것. 그것이 바로 JSX다! 어렵게 말해 JavaScript eXtension.. JavaScript의 확장 버전이고 결론은 자바스크립트이다. "React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다." (나무위키曰) 즉, JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법으로, 리액트 개발에 엄청난 도움을 주고 있다. https://velog.io/@edie_ko/React-JSX%EB%.. 이전 1 2 다음