JiSoo's Devlog

함수 컴포넌트가 상태를 사용하거나 클래스 컴포넌트의 생명주기 메서드를 대체하는 등의 작업을 위해 훅이 추가됐다훅은 state, ref 등 리액트의 핵심 기능을 함수에서도 가능하게 만들었고 클래스 컴포넌트를 간결하게 작성할 수 있게 했다 useState함수 컴포넌트 내부에서 상태를 정의하고 이 상태를 관리할 수 있게 해주는 훅import { useState } from 'react'const [state, setState] = useState(초깃값)useState의 인수로는 state의 초깃값을 넘겨준다아무런 값을 넘겨주지 않으면 초깃값은 undefiend반환 값은 배열이고 첫 번째 원소로 state 값 자체, 두 번째 원소인 setState 함수로 state의 값을 변경할 수 있다 함수 컴포넌트는 매번..

JSXXML과 유사한 내장형 구문으로 자바스크립트 표준의 일부는 아니다반드시 트랜스파일러를 거쳐야 자바스크립트 런타임이 이해할 수 있는 의미 있는 자바스크립트 코드로 변환된다JSX가 주로 사용되는 곳은 리액트 내부에서 반환하는 html과 자바스크립트 코드이지만 한정돼 있는 것은 X ◦ JSXElementJSX를 구성하는 가장 기본 요소로 HTML의 요소와 비슷한 역할JSXElement가 되기 위해 JSXOpeningElement, JSXClosingElement, JSXSelfClosingElement, JSXFragment 중 하나여야 한다JSXElementName은 JSXElement의 요소 이름으로 쓸 수 있는 것을 의미한다// JSXIdentifierfunction Valid1() { retur..

자바스크립트의 데이터 타입 ● 원시 타입 : 객체가 아닌 모든 타입으로 메서드를 갖지 않는다undefined : 선언 후 값 할당 Xnull : 명시적으로 비어있음을 나타내는 값, typeof로 확인 시 object 반환Boolean: 참 거짓, 조건문에서 truthy, falsy 값 존재  falsy → false, NaN, null, undefined, 0, -0, "", '', ``  truthy → if (1){ }Number : 모든 숫자, 진수별로 별도 데이터 타입 제공 XBigInt : number의 한계를 넘은 더 큰 숫자 저장String : 텍스트 타입(작은따옴표, 큰따옴표, 백틱)  → 템플릿 리터럴은 같은 줄 바꿈 가능, 문자열 내부에 표현식 작성 가능  → 문자열이 원시 타입이라 한..

Recoil은 React JS에서 사용할 수 있는 상태관리 라이브러리 npm install recoil Atom은 상태의 일부를 나타내는데 어떤 컴포넌트에서나 읽고 쓸 수 있다 각각의 atom 안에는 우리가 원하는 어떤 value든 저장할 수 있다 어떤 component에서 어떤 value에 접근하려면 component를 직접 atom에 연결하면 된다 전역 상태를 어플리케이션의 분리된 공간에서 관리하는 것이 훨씬 나은 방법 react-hook-form npm install react-hook-form const { register } = useForm(); register 함수를 사용하면 onChange 이벤트, value, useState 모두 필요 없다 register 함수가 반환하는 객체를 가져다가..

React Query는 편리한 방식으로 데이터를 fetch 시킬 수 있다 npm i react-router-dom React RouterDom은 어플리케이션에 URL을 가질 수 있게 해 주고 기본적으로 각기 다른 화면을 갖도록 해준다 / -> All coins /:id -> /btc -> Coin Detail Nested router /btc/information /btc/chart Nested Router(중첩된 라우터)란 한 스크린 내에 또 다른 Router를 가질 수 있는 것 Switch는 한 번에 하나의 Route를 렌더링 할 수 있는 방법 Router에게 우리의 URL이 변숫값을 갖는다는 것을 말해주는 방식 import { useParams } from "react-router-dom"; int..

TypeScript는 JavaScript를 기반으로 한 프로그래밍 언어 TypeScript는 strongly-typed인데 프로그래밍 언어가 작동하기 전에 type을 확인한다는 것 코드에 실수가 있어도 프로그램이 작동하기 전에 TypeScript가 알려줄 것이다 => 보호조치 const plus = (a:number, b:number) => a+b; plus(1, 1) // plus("a", 1) 이렇게 하면 오류! TypeScript는 브라우저가 이해하지 못한다 사용자에게 publish 할 때 TypeScript가 compile해서 평범한 JavaScript로 만들어준다 타입스크립트로 리액트 앱 프로젝트 생성 npx create-react-app 내 앱 이름 --template typescript 타입..

리액트에 CSS 적용하는 3가지 방법1. CSS 파일 만들어서 import2. style prop으로 자바스크립트 객체로 스타일 코드 넣어주기 style={{ }}3. CSS 모듈 사용하기 ~~.module.cssCSS 모듈 방식은 className을 랜덤하게 만들어 줘서 이름이 겹칠 걱정 필요 X   styled componentsstyled components는 다크 모드, 라이트 모드같은 걸 엄청 쉬운 방식으로 만들 수 있게 도와준다npm i styled-components 백틱(``) 안에 css 코드 쓰기const Father = styled.div`` styled를 import 하고 HTML 태그 사용하기import styled from "styled-components";const Fathe..

Prop Drilling 이해 & 프로젝트 개요 프로퍼티 내리꽂기(prop drilling)는 여러 층의 컴포넌트를 거쳐 공유하고자 하는 데이터를 넘겨주는 것 다수의 컴포넌트를 거쳐 속성을 전달하는데 사실 대부분의 컴포넌트가 그 데이터를 직접적으로 필요로 하는 게 아니라 그저 자식 컴포넌트에게 전달하는 역할을 맡게 되는 것이다 Prop Drilling: 컴포넌트 구성으로 해결하기 프로퍼티 prop drilling의 해결책은 컴포넌트 합성 컨텍스트 API 소개 컴포넌트 합성 외에 다른 해결방안은 컨텍스트 API이다 리액트를 구성하는 하나의 특성이라고 할 수 있는데 컴포넌트나 컴포넌트 레이어 간의 데이터 공유를 용이하게 해 준다 리액트의 컨텍스트 기능은 컨텍스트 값을 생성하고 해당 값을 제공하고 컨텍스트를 ..

절대 state를 직접적으로 수정하지 않고 항상 수정하는 함수를 사용한다 food = [1, 2, 3, 4] [6, ...food] > [6, 1, 2, 3, 4] setToDos((currentArray) => [toDo, ...currentArray]); 수정하는 함수를 사용할 때 2가지 옵션이 있다 하나는 setToDo("") 이런 식으로 이 값은 우리가 저장한 데이터를 가지고 있다 다른 하나는 함수를 보내는 방법 map()은 괄호 안에 함수를 넣을 수 있는데 이 함수는 array의 모든 item에 대해 실행될 것이다 거기서 무엇을 return하던지 간에 그 return 한 값이 새로운 array에 들어가 있게 될 것이다 map은 함수의 첫번째 인자가 진행되고 있는 순서에 맞는 item이다 {toD..

npx create-react-app my-app cd my-app npm start create-react-app을 이용하면 자동 재실행이라는 장점이 있다 npm i prop-types PropTypes를 checking 하기 위해 PropTypes install create-react-app은 CSS코드를 javascript 오브젝트로 변환시켜 준다 CSS modules -> Button.module.css import styles from "./Button.module.css"; function Button({ text }) { return {text}; } create-react-app은 무작위적인 랜덤 class를 갖는다 동일한 class 이름을 다른 파일 내에서도 사용 가능 function A..