react (46) 썸네일형 리스트형 [소플] ch 5. 컴포넌트와 Props 1. 컴포넌트 기반 구조 - 리액트를 컴포넌트 기반이라고 부르는 것은 작은 컴포넌트들이 모여서 하나의 컴포넌트를 구성하고, 또 이러한 컴포넌트들이 모여 전체 페이지를 구성하기 때문 - 하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드의 양이 줄어 개발 시간과 유지 보수 비용을 줄일 수 있음 - 리액트 컴포넌트는 어떠한 속성들을 입력받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴해줌 - 리액트 컴포넌트는 만들고자 하는대로 props(속성)을 넣으면 해당 속성에 맞춰 화면에 나타날 엘리먼트를 만들어 주는 것 2. Props - 리액트 컴포넌트의 속성 - 리액트 컴포넌트는 붕어빵 틀, Element는 붕어빵 틀에서 만들어진 붕어빵, props는 붕어빵에 들어가는 재료 - props는 같은 리액트 컴포넌트에.. [소플] ch4. 엘리먼트 렌더링 1. 엘리먼트의 정의 - Elements are the smallest building blocks of React apps - 앨리먼트는 리액트 앱의 가장 작은 빌딩 블록 - 실제 브라우저의 DOM에 존재하는 엘리먼트는 DOM 엘리먼트가 되는 것이고, 리액트의 Virtual DOM에 존재하는 엘리먼트가 바로 리액트 엘리먼트가 됨 - 리액트 엘리먼트는 DOM 엘리먼트의 가상 표현 - 리액트 엘리먼트는 화면에서 보이는 것을 기술 2. 엘리먼트의 생김새 - 리액트 엘리먼트는 자바스크립트 객체 형태로 존재 - 엘리먼트는 컴포넌트 유형과 속성 및 내부의 모든 자식에 대한 정보를 포함하고 있는 일반적인 자바스크립트 객체 ex) Button을 나타내는 엘리먼트 - type에 HTML 태그 이름이 문자열로 들어가는 .. [코드잇] 리액트로 웹 사이트 만들기 - 리액트에서는 웹사이트도 컴포넌트로 만들 수 있음 - 리액트 라우터(React Router) 사용 1. 리액트 라우터 v6 소개 리액트 라우터 - 리액트 컴포넌트로 페이지를 나누고 이동하게 해주는 라이브러리 - 페이지 나누기 - 페이지 이동 - 핵심 컴포넌트 -> 라우터(Router), 라우츠(Routes), 라우트(Route), 링크 (link) 라우터 (Rounter) - 리액트 라우터에서 사용하는 데이터들을 모두 갖고 있음 - 현재 주소, 페이지 기록같은 데이터를 가지고 있음 - Router 컴포넌트도 내부적으로는 context provider임 라우츠(Routes), 라우트(Route) - Routes 컴포넌트 안에서 Route 컴포넌트로 페이지의 경로랑 보여줄 컴포넌트를 지정 링크(link) .. [코드잇] 리액트로 데이터 다루기(5) 1. Context란? - 전역 데이터 (Global Data) : 프로젝트 전체적으로 사용하는 데이터 - 전역 데이터를 다룰 때 Props와 State만 사용하면 Props로 여러 번, 여러 곳에 내려줘야 한다는 문제점 존재 - Prop Drilling : 드릴로 땅을 파듯이 상위 컴포넌트에서 하위 컴포넌트로 반복해서 Prop을 내려주는 상황 - Context를 사용하면 Props를 거치지 않고 여러 컴포넌트에 데이터를 넘겨줄 수 있음 - 리액트 Context를 사용하려면 우선 데이터를 공유할 범위를 정해야 함 -> Context.Provider라는 컴포넌트로 범위를 정해 줄 수 있음 -> Provider의 자손 컴포넌트에서는 Props를 거치지 않고 데이터를 자유롭게 쓸 수 있음 Context - 많.. [코드잇] 리액트로 데이터 다루기 (4) 1. 글 작성하기 - 입력폼의 onSubmit 함수에다가 리뷰 생성 API를 연동 api.js const BASE_URL = 'https://learn.codeit.kr/6205'; export async function getReviews({ order = 'createdAt', offset = 0, limit = 6, }) { const query = `order=${order}&offset=${offset}&limit=${limit}`; const response = await fetch(`${BASE_URL}/film-reviews?${query}`); if (!response.ok) { throw new Error('리뷰를 불러오는데 실패했습니다'); } const body = await res.. [코드잇] 리액트로 데이터 다루기(3) 1. 리액트에서 입력 폼 만들기 - 리액트에서는 주로 input의 값을 State로 관리 - State값과 input의 값을 동일하게 만듬 - 리액트에서의 onChange는 순수 자바스크립트에서 onChange와 다르게 동작 -> 사용자가 값을 입력할 때마다 onChange 이벤트 발생 ReviewForm.js import { useState } from 'react'; import './ReviewForm.css'; function ReviewForm() { const [title, setTitle] = useState(''); const [rating, setRating] = useState(0); const [content, setContent] = useState(''); const handleT.. [코드잇] 리액트로 데이터 다루기(2) 1. 리액트에서 fetch 사용하기 api.js export async function getReviews() { const response = await fetch('https://learn.codeit.kr/6205/film-reviews'); const body = await response.json(); return body; } App.js import { useState } from 'react'; import ReviewList from './ReviewList'; import { getReviews } from '../api'; function App() { const [order, setOrder] = useState('createdAt'); const [items, setItems] =.. [코드잇] 리액트로 데이터 다루기(1) 1. mock 데이터 추가하기 App.js import ReviewList from './RevieList'; import items from '../mock.json'; function App() { return ( ); } export default App; ReviewList.js function ReviewList({ items}) { console.log(items); return ; } export default ReviewList; 2. map으로 배열 렌더링하기 - 배열 메소드 map에서 콜백 함수의 리턴 값으로 리액트 엘리먼트를 리턴 ReviewList.js import './ReviewList.css'; function formatDate(value) { const date = new .. 이전 1 2 3 4 5 6 다음
