웹공부/React (13) 썸네일형 리스트형 React에서 react-hook-form 사용하기 react-hook-form은 매우 간편하게 form을 생성 및 관리할 수 있는 모듈이다. 해당 사용법에 대해 배워보기 전에, 기존의 방법대로 간단한 form 생성을 구현해보고, 기존 코드를 react-hook-form 모듈을 사용해 대체하면 얼마나 간단해지는지 비교해보자. 아래와 같이 글자가 10자 이상인 todolist를 입력받아 submit하는 간단한 form을 만들어 보자. [ToDoList.tsx] 위와 같은 동작을 하는 form을 생성하기 위해서 todo value의 실시간 입력값을 저장하는 state와 setter함수, 글자수가 부족할 때의 에러메시지 출력값을 저장할 state와 setter 함수, onChange 함수, onSubmit 함수 등등 간단한 기능의 todo리스트 한줄을 생성하는.. React에서 Recoil로 상태관리하기 상태 관리 라이브러리 Recoil에 대해 학습해보자. Recoil: A state management library for React Recoil A state management library for React. recoiljs.org 서론 왜 State 관리가 필요한가? ->다크모드/라이트모드 스위치를 만들며 이해해보기 1) index.tsx 파일에 적용되어있는 themeProvider 옮기기 왜 index.tsx -> app.tsx로 옮겼나면, theme을 state로 관리하기 위해서다. -index.tsx에 있던 ThemeProvider를 App.js로 이전 -(theme.tsx) Theme = > lightTheme, darkTheme 두가지 버전으로 확장 //theme을 app.tsx에서의 s.. React에서 typescript 사용하기 https://www.typescriptlang.org/ JavaScript With Syntax For Types. TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code. www.typescriptlang.org typesrcipt는 개발자가 할 수 있는 사소한 실수들을 코드 실행 전에 잡아주는 유용한 도구이다. 맛보기로 살펴보자면, const plus = (a, b)=> a+b;라는 함수가 있을 때 number끼리만 더하고 싶을 경우,.. React에서 styled components 사용하기 https://styled-components.com/ styled-components CSS for the Age styled-components.com styled components는 css 페이지를 따로 만들지 않고, javascript 안에서 편하게 스타일을 적용할 수 있게 해준다. css가 적용된 컴포넌트를 사용자 정의 이름으로 생성해 코드의 가독성을 높여준다. styled-component 설치 명령어(in terminal) npm i styled-components styled-component 사용법 styled-component를 설치했으면, 사용할 페이지에 import 해줘야 한다. import styled from "styled-components"; 1. 스타일 적용된 태그 생성하.. React 공부 9일차 TypeScript JavaScript를 기반으로 한 프로그래밍 언어, strongly-typed language JS 거의 복붙인데 거기에 새로운 기능만 살짝 추가됐다고 생각하면 된다.(Type에 관해서...) const plus = (a, b)=>a + b; JS는 이대로 코드를 실행시켜도 문제 없이 결과를출력한다. a, b의 자료형이 달라도 상관없이 말이다. 하지만 저대로 코드를 실행하면, TypeScript는 error message를 출력한다. TypeScript 코드가 발동하기 전에 protection이 일어나고, 별 문제가 없으면 JS 코드를 return한다. const plus = (a: number,b: number)=>a + b; TypeScript는 strongly-typed한 특성을.. React 공부 8일차 React 입문자 강의로 리액트란 무엇인가에 대해 간단하게 찍먹하고, 본격적으로 React 공부를 시작해보려 한다. 터미널에 아래 코드를입력해 새 react project를 만들어주었다. npx create-react-app react-masterclass Styled Components 이걸 사용하기 전에는 style을 아래 3가지 방법을 이용해 적용해왔다. 1) styles.css 파일을 js 파일에 import해서 style 적용 2) html 태크에 style 속성을 직접 입혀줌 3) css module 사용: className이 겹쳐도 상관이 없다는게 큰 장점 ${fileName}.module.css -> 모듈 안의 className들을 object의 속성인 것처럼 사용하면 됨. 1) Style.. React 공부 7일차 라우팅이란? 웹 어플리케이션에서의 개념은 사용자가 요청한 url에 따라 알맞은 페이지를 보여주는 것이다. 블로그같이 여러 페이지로 구성된 웹 어플리케이션을 만들 때 각 페이지별로 컴포넌트들을 분리해가면서 관리하기 위해 필요하다. props는 object일 뿐이고, 사용자는 그걸 열어서 item을 꺼내 쓰는 것. component를 rendering하는 것은 함수를 불러오는 것. App.js에 "react-router-dom" import하기 function App(){ return ( {/* Switch는 Route(url)을 찾으면 component를 rendering함 */} {/* user가 movie path에 있으면, movie component를 보여줘라. */} ); } export defa.. React 공부 6일차 App.js import {useState, useEffect} from "react"; import Movie from './components/Movie'; //자식 component 파일 import 해주는 거 잊지 말기!! function App(){ const [loading, setLoading]=useState(true); const [movies, setMovies]=useState([]); const getMovies = async()=>{ const json = await(await fetch("https://yts.mx/api/v2/list_movies.json")).json(); setMovies(json.data.movies); setLoading(false); } useEffec.. 이전 1 2 다음
