썸네일 [React] json-server 사용하기 json-server 빠르고 쉽게 REST API를 구축해준다. ➰ REST API : URI 주소와 메서드로 CRUD(Create, Read, Update, Delete) 요청을 하는 것 가짜 API 서버 열기 먼저 프로젝트 디렉터리에 (src 디렉터리 밖에) data.json 파일을 작성한다. { "days": [ { "id":1 , "day":1 }, { "id":2 , "day":2 }, { "id":3 , "day":3 } ], "words": [ { "id": 1, "day": 1, "eng": "book", "kor": "책", "isDone": false }, { "id": 2, "day": 1, "eng": "car", "kor": "자동차", "isDone": false }, { "id..
썸네일 [React] 이벤트 처리, useState, prop - 예제 코드 이벤트 처리(Handling Event) export default function Welcome () { function showName () { console.log("yuns") } function showAge (age) { console.log(age) } function showText (txt) { console.log(txt) } return ( Welcome! Show name {showAge(10)} }>Show age { const txt = e.target.value; showText(txt); }} /> ) }​ useState() state : 컴포넌트가 갖고 있는 속성값 import { useState } from "react"; export default function We..
썸네일 [React] React에서 CSS 사용하기 - eject, module css CRA를 사용하여 프로젝트 생성하기 HMR : Hot Module Replacement, 모든 종류의 모듈을 새로고침할 필요 없이 런타임에 업데이트 할 수 있다. Package.json 살펴보기 // package.json "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eject" : 내부에 숨겨진 모든 설정 파일들을 꺼내는 명령어 ✅ Webpack, Babel 등의 설정을 변경하고 싶을 때 사용한다. React에서 CSS 사용하기 1. 인라인 스타일 사용 import World from "./Wor..
썸네일 [React] 미니 블로그 프론트단 작성, 빌드 - router, route, useNavigate() 미니 블로그 기획하기 개발을 시작하기 전에 정해야 할 것들 기획 미니 블로그에 필요한 기능 글목록 보기 기능(리스트 형태) 글 보기 기능 댓글 보기 기능 글 작성 기능 댓글 작성 기능 주요 컴포넌트 구성 글목록 보기 기능 : PostList, PostListItem 글 보기 기능 : Post 댓글 보기 기능 : CommentList, CommentListItem 글 작성 기능 : PostWrite 댓글 작성 기능 : CommentWrite 전체 화면 디자인 개발 환경 세팅 프로젝트 생성 npx create-react-app mini-blog 패키지 설치 react-router-dom (v6) :리액트 앱에서 경로 전환을 위해 사용하는 패키지 styled-components (v5) ✅ npm instal..
썸네일 [React] styled-components 설치 및 사용, 스타일 확장 styled-components styled-components는, css 문법을 그대로 사용하면서 결과물을 스타일링된 컴포넌트 형태로 나타내주는 오픈소스이다. 컴포넌트를 사용하기 때문에 리액트와 궁합이 잘 맞아, 리액트 개발에 많이 사용하고 있다. styled-components 설치하기 # npm을 사용하는 경우 npm install --save styled-components # yarn을 사용하는 경우 yarn add styled-components 아래 코드를 작성하여 styled-component가 잘 적용됐는지 확인할 수 있다. import React from "react"; import styled from "styled-components"; const Wrapper = styled.di..
썸네일 [React] Lifting State Up - Shared State Shared State 리액트로 개발을 하다 보면, 하나의 데이터를 여러 개의 컴포넌트에서 표현해야 하는 경우가 생긴다. 이 경우, 각 컴포넌트의 state에서 데이터를 각각 보관하는 것이 아니라 가장 가까운 공통된 부모 컴포넌트의 state를 공유해 사용하는 것이 더 효율적이다. 이를 Shared State라고 하며, state에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 경우를 말한다. 자식 컴포넌트들이 각각 값을 가지고 있을 필요가 없고, 부모 컴포넌트의 state에 연산(*2)를 해주면 된다. 하위 컴포넌트에서 State 공유하기 1. 섭씨온도를 props로 받아 물이 끓는지 안 끓는지 문자열로 출력해주는 컴포넌트를 만든다. function BoilingVerdict(props..
썸네일 [React] Context API - useContext() Context API React.createContext() 📌 Context (객체) 생성 const MyContext = React.createContext(기본값); 리액트에서 렌더링이 일어날 때, context를 구독하는 하위 컴포넌트가 나오면 현재 context의 값을 가장 가까이에 있는 상위 레벨의 Provider로부터 받아오게 된다. 만약 상위 레벨에 매칭되는 Provider가 없다면 기본값이 사용된다. 기본값은 Provider 없이 컴포넌트를 테스트할 때 유용하며, 기본값으로 undefined를 넣으면 기본값이 사용되지 않는다. Context.Provider 하위 컴포넌트들이 해당 context의 값을 사용할 수 있도록 전달해 준다. (Provider→제공자) 모든 Context 객체는 P..
썸네일 [React] Context 개념 및 특징 Context Context란, 기존의 일반적인 리액트 컴포넌트는, 컴포넌트의 props를 통해 데이터를 전달한다. 하지만 이러한 전달 방식은 '부모 → 자식'의 일방향이기 때문에, 아래로 들어갈수록 코드가 복잡해진다. 그러므로 여러 컴포넌트에 걸쳐 자주 사용되는 데이터의 경우, Context를 사용한다. 언제 Context를 사용해야 할까? 여러개의 컴포넌트들이 접근해야 하는 데이터 ➰ 로그인 여부, 로그인 정보, UI 테마, 현재 언어 등 📌 prop를 통해 데이터를 전달하는 경우 ( 기존 방식 ) function App(props){ return } function Toolbar(props) { // 이 Toolbar 컴포넌트는 ThemeButton에 theme를 넘겨주기 위해서 'theme' pr..
썸네일 [React] Composition VS. Inheritance - Containment, Specialization Composition 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 ( 합성 ) Containment 여러개의 컴포넌트들을 어떻게 조합할 것인가? Contain : 담다, 포함하다 하위 컴포넌트를 포함하는 형태의 합성 방법 Sidebar나 Dialog 같이 '범용적인' Box 역할을 하는 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없다. → 이러한 경우, children이라는 prop을 사용해서 조합한다. ( 세부적 ) 더보기 컴포넌트에서 다른 컴포넌트를 담기 어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올 지 미리 예상할 수 없는 경우가 있습니다. 범용적인 ‘박스’ 역할을 하는 Sidebar 혹은 Dialog와 같은 컴포넌트에서 특히 자주 볼 수 있습니다. 이러한 컴포넌트에서는 특수한 ch..
썸네일 [React] Hook의 규칙과 Custom Hook - 커스텀 훅 특징 및 사용법 Hook의 규칙 1. Hook은 무조건 최상위 레벨에서만 호출해야 한다. 반복문이나 조건문, 중첩된 함수들 안에서 Hook을 호출할 수 없다. Hook은 컴포넌트가 렌더링 될 때마다 매번 같은 순서로 호출되어야 한다. ⏩ useState(), useEffect()를 호출해서 컴포넌트의 state를 올바르게 관리할 수 있도록 한다. 📌 예제1. 잘못된 Hook 사용법 import { useEffect } from 'react'; function MyComponent(props) { const [name, setName] = useState('yuns'); if(name !== '') { useEffect(()=> { ... }); } ... } ⏩ 렌더링할 때마다 Hook이 같은 순서로 호출되지 않고, 조..
썸네일 [React] React Hook의 종류 - useMemo(), useCallback(), useRef() Hook의 종류 - 2 useMemo() Memoized value를 리턴하는 Hook Memoization 비용이 높은 함수의 호출 결과를 저장해 뒀다가, 같은 입력값으로 함수를 호출하면 저장해둔 호출 결과를 바로 반환한다. ➰ Memo를 해두었다가 나중에 다시 사용하는 것! 속도를 향상하고, 불필요한 중복 연산을 제거할 수 있다. Memoized Value : Memoization된 결과값 사용법 const memoizedValue = useMemo( () => { // 연산량이 높은 작업을 수행하여 결과를 반환 return computeExpensiveValue(의존성 변수1, 의존성 변수2); }, [의존성 변수1, 의존성 변수2] ); 2개의 파라미터를 갖는다. memoization 해줄 값을 ..
썸네일 [React] React Hook의 개념과 종류 - useState(), useEffect() Hooks Function Component와 Hook 컴포넌트의 종류로는 Function Component와 Class Component가 있다. Function Component state 사용 불가 Lifecycle에 따른 기능 구현 불가 Hooks Class Component 생성자에서 state를 정의 setState() 함수를 통해 state 업데이트 Lifecycle methods 제공 Hook을 사용하면, Function Component도 Class Component의 기능을 모두 동일하게 사용할 수 있다. Hook 의미 및 특징 Hook, 갈고리 ➰ 기존에 사용하던 기능에 갈고리를 거는 것처럼 끼어 들어가 같이 수행되는 것. React Hook : 리액트의 state와 생명 주기 기능에..
라이브러리 브랜드 그룹 | 천천히 굴러가는 개미공장

티스토리툴바