행복을 담는 블로그

5. Passing Props 예시 1) props로 {count}를 넘겨줄 때, type을 함께 지정해준다. {count} : {count : string} import { useState } from "react"; function Parent() { const [count, setCount] = useState(""); return ; } function Child({ count }: {count: string) { return {count}; } export default Parent; 예시 2) import { useState } from "react"; function Parent(){...} type Props = { count: string; }; function Child({ count ..

React + TS 1. 함수에서 TS 사용하기 방법 1) function sum(a: number, b: number): number { return a + b; } ▶️ 매개변수 각각의 type을 지정해주고, return문의 type을 지정 방법 2) function objSum({ a, b }: { a: number; b: number }): string { return `${a + b}`; } ▶️ object를 인자로 받을 경우, { a, b }: { a: number; b: number } 각각의 type을 지정. 2. 비동기 함수에서 TS 사용하기 1️⃣ Person의 타입을 지정해준다. type Person = { id: number; age: number; height: number };..

패키지 설치하기 yarn add react-router-dom 페이지(원래 단일 페이지) 컴포넌트 작성 -> 다중 페이지 Router.js 파일 생성. router를 구성하는 설정 코드 작성 (ex : redux 할 때도 설정 파일을 따로 만들어 주입함) App.jsx import 하고(2번) 적용 : 주입 페이지 이동 테스트 원래 페이지 localhost:3000/여기 router라는 주소가 들어간다. React router hook useNavigate : 특정 버튼을 눌렀을 때, 다른 페이지로 이동하도록 하는 기능을 제공한다. html의 a 태그랑 비슷하다 /* pages > Works,jsx */ function Works() { const navigate = useNavigate(); retur..

Error: listen EADDRINUSE: address already in use :::5000 아니 나는 분명 port 5000을 사용한 적이 없는데, db.json 파일을 json-server로 열려고 하니 이미 5000 포트가 사용 중이라고 에러가 났다. 진짜 뭐지 왜지 했는데... 이게 윈도우에서는 netstat -aon 을 사용하면 해당 port의 PID를 알 수 있고, 이 포트가 어디에서 사용되고 있는 포트인지를 확인 할 수 있다고 한다. 근데 맥북에서는 내가 원하는 값이 안 나와서 서칭을 하다보니 아래 코드로 확인해 볼 수 있었다. sudo lsof -iTCP -sTCP:LISTEN -n -P 찾았다 요놈! 찾아보니 5000 port 에는 ControlCe 가 연결이 되어 있는데, 바로..

원래는 CRA로 계속 프로젝트를 진행하다가 이번에 처음으로 vite을 쓰는 중인데,,, 그동안 안 나던 error가 알게 모르게 계속 나는 것 같다.. 그 중에서 오늘 하루종일 제일 거슬렸던 건 바로, 이 props 로 받아온 값이 계속 유효성 검사에서 누락되었다는 경고가 옆에 뜨는 것이었다. 🚨 'children' is missing in props validation근데 심지어 console.log 값도 잘 찍히고, 브라우저에서는 아무런 에러도 뜨지 않는단 말이지,,, (그냥 코드 짜는 내내 너무 거슬렸음) 그래서 막 구글링을 해보니, 부모 컴포넌트로부터 전달받은 props 중에서 특정한 prop이 컴포넌트의 PropTypes에 정의되지 않았을 때 발생한다고 한다. 즉, 해당 props..

2. useEffect : 렌더링 될 때, 특정한 작업을 수행해야 할 때 설정하는 훅 컴포넌트가 화면에 보여졌을 때 컴포넌트가 화면에서 사라졌을 때 input에 값을 입력 value, 즉 state가 변경 state가 바뀌었기 때문에, App 컴포넌트가 리렌더링 리렌더링 되었기 떄문에, useEffect()가 계속 실행 1~4 반복 **Dependency Array (의존성 배열)**라는게 필요하다 이 배열에 값을 넣으면, 그 값이 바뀔때만 useEffect를 실행한다. 의존성 배열에 아무 값도 넣어주지 않아도 동작하고 있다. = 어떤 값을 입력하던지 간에, 의존성 배열이 비어 있기 때문에, 화면이 가장 처음 시작할 때만 렌더링 된다. useEffect(() =>..

1. useState 📌 정의 가장 기본적인 hook으로, 함수 컴포넌트에서 가변적인 상태를 가지게 해준다. ✅ 기본 형태 const [state, setState] = useState(initialState);▶️ 원래는 useState라는 함수가 배열을 반환하고, 이 배열을 구조분해할당으로 꺼내 놓은 형태이다. state를 변수로 사용, setState를 이용하여 state 값을 수정한다. ++ state가 원시 데이터가 아닌 객체 데이터 타입일 경우 불변성을 유지 해야한다. useState의 업데이트 방식 // 기존 업데이트 방식 setState(number + 1); // 함수형 업데이트 방식 setState(() => {}); 초기값이 0인 number를 setNumber를 통해 +1 씩 증가하..

1. CSS-in-JS : Javascript code로 CSS code를 작성하여 컴포넌트를 꾸미는 방식을 말한다. 기존에 CSS 작업을 하기 위해서는, css 파일을 따로 만들어 className을 넘겨주어 작업을 하였지만, CSS-in-JS 방식은 따로 css 파일을 만들지 않고, js 파일 안에서 css 작업까지 완성할 수 있다. 2. Styled Components : React 에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지를 말한다. 아래 npm trends를 비교해보면 styled-component를 가장 많이 사용하는 것을 알 수 있다. 🧐 그렇다면 패키지란 무엇인가? : 리액트 자체에는 없는 기능을 사용할 수 있도록 외부로터 가져와서 사용할 수 있는 외부 라이브..