# React

orangetree401

TypeScript에서 styled-components를 사용해 어떻게 테마 설정을 하는지 알아보자! styled-components 설치 > npm install @types/styled-components TypeScript 선언 파일 생성 > styled.d.ts styled.d.ts 파일을 생성하여 styled-components의 DefaultTheme 인터페이스를 확장한다. 테마 객체 생성 > theme.ts theme.ts 파일을 생성하여 light테마와 dark 테마를 정의한다. ThemeProvider 설정 > index.tsx index.tsx 파일에서 ThemeProvider를 import하여 App 컴포넌트를 감싸준다. 스타일 적용 > App.tsx

doldory55

리액트쿼리를 프로젝트에 사용하는데 특정부분에서 쿼리무효화가 되지 않았었다. 왜 안되는건지 구글링에서 살펴본 결과, 1시간을 삽질을 했다. 해결한 뒤, 조금 허무맹랑했다. 설명하기전에 쿼리무효화에 대해 짧게 설명하겠다. > 쿼리 무효화는 리액트 쿼리에서 GET한 데이터를 최신데이터로 업데이트 시켜주기 위해 사용한다. 나는 react-query를 설치하고 아래코드처럼 옵션을 지정했었다. 언뜻 보기엔 문제가 없다. 하지만 문제는 항상 나였다. 난 제대로 알지못하고 구글링해서 나온 코드로 복붙만 하고 넘어가서 무슨 원인인지 이때까지는 알지 못했었다. 쿼리무효화가 잘 되지 않았었던 이유는 refetchOnMount: false로 설정했기 때문이였다. 이 옵션은 특정 쿼리를 무효화할때, 그 특정쿼리를 불러오는 컴포넌트가 unmount 상태면 그 쿼리는 inactive가 되기 때문에 쿼리 무효화가 되지 않았던 것이였다. 쉽게 설명하자면, 한 영상이

eunjios

useEffect가 왜 필요할까? > useEffect 콜백 함수는 언제 실행될까? > cleanup 함수는 뭘까? 🤔 useEffect가 왜 필요할까? useEffect는 side effect를 처리하기 위해 필요하다. 예를 들어, 특정 컴포넌트가 마운트 된 후 HTTP 요청을 보내야 하거나, 버튼을 눌렀을 때 어떤 값을 localStorage에 저장해야 하거나, 유저의 입력의 유효성을 처리해야 하는 등 다양한 상황에 필요하다. React의 주기능은 UI를 렌더링하는 것이다. 유저의 클릭이나 입력으로 상태가 달라질 수 있고 보여줘야 하는 UI를 다시 렌더링 할 수 있다. 그러나 이 외에도 처리할 일들이 많다. 서버에서 데이터를 가져오거나, localStorage에 값을 저장하거나, 에러 처리 등 렌더링 외의 것을 side effect 라고 한다. 예시 useEffect의 동작 원리를 파악하기 위해

kinsk2839

Suspense 공식 문서에 나와있는 정의는 아래와 같다. > children 로딩이 마칠 때까지 fallback UI를 보여주는 컴포넌트 즉, children에서 비동기 작업이 완료되기 전까지 fallback UI를 보여주고, 비동기 작업이 완료되면 실제 children을 보여준다. 예시로 서버에 데이터를 요청하여 실제 데이터가 올 때까지 로딩화면을 보여주는 것이 있다. Suspense 예시 gif Suspen

dev-april

출처 비동기함수 fetch axios.get axios.post axios... pool.query 보통 데이터를 갖고올때 오래걸리는 애들 우리가 생각할때 불편한 애들 순서가 위-> 아래가 아니기때문에 async await 문법 javaScript 비동기 함수를 동기 함수처럼 사용하고 싶어 비동기 함수 앞에 await를 사용하면 동기함수로 해석한다 await를 썼으면 await를 감싸고있는 함수를 async함수라고 알려줘야 한다!! 가독성을 위해 메모를 코드

dbstj0403

📚 Styled-components Styled-components란? JS 내에서 CSS 코드를 적용할 수 있게 해주는 라이브러리. 리액트로 개발하다 보면 굉장히 많은 페이지 파일들과 태그들이 생길 수밖에 없는데, CSS 파일을 따로 추가하거나 Class name을 고민하지 않아도 되므로 매우 편리하다. ✨ 설치 npm install styled-components yarn add styled-components 설치 후 사용하고자 하는 JS 파일 내에 👉🏻  import styled from 'styled-components'; 문법 ✅ CSS 코드는 꼭 백틱 ``으로 감싸줘야 한다. 또한 컴포넌트 이름이기 때문에 시작은 대문자로! 예시 출력 화면 ![](https://velog.velcdn.com/images/dbstj0403/post/39d6f110-30ec-4638-a

chldmswnl

플러터 앱에서 동작하는 웹뷰를 개발하는데 푸시메세지 터치시 웹뷰의 특정페이지로 이동하는 기능을 개발해야 했다. 구글링을 하다가 window.postMessage 메서드를 통해 앱과 웹뷰가 통신할 수 있다는 사실을 알게되었고 구현을 시작했다. MDN에 따르면 window.postMessage() 메서드는 window object 사이에서 안전하게 cross-origin 통신을 할 수 있게 해준다고 나와있다. > targetWindow.postMessage(message, targetOrigin, [transfer]); targetWindow: 메세지를 전달 받은 window message: 다른 window에 보내질 데이터 targetOrigin: 다른 window의 origin을 지정. 민감한 정보를 다룰때는 지정해줌으로서 탈취를 막을 수 있다. transfer: transfer 객체 이제 코드를 살펴보자 플러터 다트문법은 모르지만 챗지피

sarang_daddy

React Hook Form React Hook Form (RHF)은 React 기반 애플리케이션에서 폼을 쉽게 관리할 수 있도록 도와주는 라이브러리다. 일반적인 방법으로 Form을 만든다면 매우 많은 state와 검증단계가 필요하다. RHF을 사용한다면 다양한 Input의 상태와 검증을 간단하게 관리할 수 있다. 일반적인 방법의 코드 하나의 input에도 많은 양의 코드가 필요하다. React Hook Form React Hook Form 설치 사용방법 1. useForm RHF의 핵심 훅으로 폼과 관련된 여러 메서드와 속성을 가져올 수 있다. const {} = useForm() 에서 다양한 메서드(도구)를 사용할 수 있다. register: 입력 요소를 폼에 등록하는 함수 handleSubmit: 폼 제출을 처리하는 함수 -

syon013

오늘도 여전히 친구에게 열혈 강의를 받은 내용을 기술해볼까 한다. 이번에 적어볼 기능은 Chip 인데, Chip은 아래의 이미지 처럼 생긴걸 Chip 이라고 한다고 한다. 얘는 TAB 버튼과 비슷한 방식으로 작동되는 아이인데, 누를 때마다 Checked 상태로 선택/비선택이 확실하게 표시된다고 해야하나? 페이스북 태그, 인스타 태그? 같은 거에도 쓰이고 여기 velog 에서도 태그 입력시 나오는 것도 Chip이라고 할 수 있을 것 같다. 자 그럼 이제 본격적으로 적어보겠다. 1. Chip Component 생성 일단 Chip을 사용하기 위해서는 가져다 쓸 Component 를 먼저 만들어줘야한다. ![](https://velog.velcdn.com/images/syon013/post/

orangetree401

React와 TypeScript를 사용하여 간단한 폼을 만들어보자! 아래의 코드는 사용자가 버튼을 클릭하면 콘솔에 사용자 이름이 로그되는 코드이다. 상태 설정 > useState 훅을 사용하여 username 상태를 설정한다. onChange 핸들러 > event가 input 요소의 이벤트 객체임을 TypeScript에게 알려준다. 객체 구조 분해를 사용하여 event 객체에서 currentTarget을 가져오고, currentTarget에서 value를 가져온다. onSubmit 핸들러 > event가 form 요소의 이벤트 객체임을 TypeScript에게 알려준다. 콘솔에 "hello" 문자열과 username을 출력한다. 렌더링 > 간단한 로그인 폼을 렌더링한다. 사용자가 input 필드에 값을 입력하면 onChange 핸들러가 호출되고, Login버튼을 클릭하면 onSubmit 핸들러가 호출된다.

orangetree401

TypeScript(+React)에서의 Props 사용 방법을 알아보자! 아래 코드는 Circle 컴포넌트를 만들고, App에서 Circle 컴포넌트를 렌더링하는 간단한 로직이다. App 컴포넌트 설정 > App.tsx Circle 컴포넌트를 import한 후 두 개의 Circle을 렌더링하여 각각의 props를 전달한다. Circle 컴포넌트에서의 interface 사용 > Circle.tsx interface를 사용해 객체의 타입을 TypeScript에게 설명해준다. TypeScript의 interface는 코드 실행 전에 오류를 확인해주기 때문에 매우 유용하다. interface로 타입을 명시해주고, 아래와 같이 사용한다. 'bgColor는 CircleProps의 프로퍼티이며, 타입은 string이다.' 라는 의미이다. Required Props와 Optional Props > Optional Props로 설정하고 싶은 경우 `?

somda

본 포스팅은 React 공식 사이트의 thinking-in-react와 choosing-the-state-structure 파트를 기반으로 작성되었습니다. state란 state는 일반 JavaScript 객체이며 react에게 리렌더링을 요청하는 하나의 트리거이기도 하다. 이 state를 더 '잘' 쓰기 위해 알아야할 것들을 정리해보았다. state 판별법 여러 데이터 중 어떤 것이 state이고 아닌지 판별하는 법은 다음과 같은 질문을 통해 해결할 수 있다. >1. 시간이 지나도 변하지 않는가? 부모로부터 props로 전달되는가? 컴포넌트 안의 다른 state나 props를 통해 계산이 가능한가? 위에서 한 가지라도 해당되면 그 값은 **state가 아니다

cogito

새로운 프로젝트의 시작 단계에 있는데, 함수형 컴포넌트 타입 선언 컨벤션을 정하다가 React.FC에 대해 많은 이야기가 오갔다. 일단 논점은 React.FC 의 일부 특징 때문에 사용을 지양해야한다는 것이었다. 그래서 React와 TypeScript 최신 버전을 기준으로 React.FC를 사용하는 것이 적절한지 찾아보니 React.FC를 사용하면 안되는 이유로 여겨졌던 부분들이 일부 해결되어있었다. 1. children은 더 이상 props 타입에 암묵적으로 포함되지 않으며 명시적으로 선언해야 한다. React.FC 사용을 지양해야한다는 대표적인 이유였던, 또 누군가는 유용하게 사용한 기능이었던 암묵적인 children 선언이 제거되었다. 암묵적으로 children을 선언한다는 것

papicc45

Event Handling React에서의 event React에서 event속성을 줄 때는 camelCase 사용, JSX 사용해 이벤트 핸들러 전달 함수에 인자를 담아 보낼땐 화살표 함수 사용 >### 클래스 컴포넌트에서의 이벤트 클래스 컴포넌트에서는 this 사용하여 이벤트 함수 접근 클래스 내에서 이벤트 함수 정의 일반 함수로 정의했을 경우, 생성자에 bind 사용 필수 화살표 함수로 정의했을 경우, 따로 생성자에 정의할 필요 없음(자동 바인딩) render 내부에서 바로 바인딩할 수 있으나, 좋은 방법은 아님! >### state, setState state React에서 유동적인 데이터 다루기 위한 개체, 계속 변하는 특정 상태(컴포넌트가 가지고 있는 값) state가 변경될 시 자동 재렌더링(변수는 변경되도 렌더링되지 않음) setState 메서드를 통해 상태를 변경할 수 있음 특징 클래스형 컴포넌트에서만 사

juicyfresh

📍Routing Routing은 다른 경로(url 주소)에 따라 다른 화면을 보여주는 것을 의미한다. 📍MPA와 SPA의 라우팅 방법 비교 기존의 웹페이지에서는 html에 a 태그를 통해 링크를 걸고, 화면에서 해당 링크를 클릭했을 때 다른 html 페이지로 이동하는 방식으로 라우팅을 했다. 이건 html페이지가 여러개로 존재하는 MPA(Multi Page Application) 일때 라우팅을 하는 방식이다. 하지만 리액트에서는 html 페이지가 하나인 SPA(Single Page Application) 이기 때문에 위 방식과는 다르게 라우팅을 구현해야 한다. (리액트는 Framework가 아닌 Library이기 때문에 라우팅 기능이 내장되어있지 않기 때문에 별도의 Library를 설치해서 라우팅을 구현해야 함) 📍SPA 라우팅 방법 리액트의 라우팅 방법은 아래와 같다. ❶ 라우팅 기능이 필요한 프로젝트에서 터미널을 열고 해당

orangetree401

Recoil을 사용하여 실시간으로 알림 목록과 개수를 업데이트하는 기능을 구현해보려고 한다! 1. Atom 생성 먼저, 알림 데이터와 알림 개수를 관리하기 위한 두 개의 atom을 생성한다. 2. 상태 설정 및 데이터 처리 useSocketManager라는 커스텀 훅을 구현하여 이 훅 내에서 Recoil 상태를 설정하고, 알림 데이터를 처리한다. 2-1. 상태 설정 함수 가져오기 → useSetRecoilState 훅을 사용하여 상태를 설정할 수 있는 함수 noticeListState, noticeCountState를 가져온다. 2-2. getNotice 함수 선언 → 전체 알림 데이터와 새로운 알림 데이터 개수를 설정할 함수를 선언한다. 2-3. 알림 데이터 가져오기 → fetchNotification() 함수를 호출하여 서버로부터 전체 알림 데이터를 가져와 응답을 처리한다. 2-4. 데

ehyowon

☑️ 숫자게임 만들기! : 1~100 사이 숫자 아무거나 하나를 랜덤으로 지정하고, 사용자가 맞추는 게임. 사용자가 선택한 숫자가 정답보다 작으면 UP을 띄우고, 크면 DOWN을 띄운다. 사용자가 해당 숫자를 맞추면 숫자를 알려주며 CORRECT!라고 띄운다. 주어진 기본 화면은 아래와 같다. ☑️ 작성 코드 HTML CSS Javascript ☑️ 결과 화면 ![](https://velog.velcdn.com/images/ehyowon/post/1bb1bd0f-

yeojiyoon

Link html의 a 태그, 즉 link를 걸어 준다. a태그를 사용할 경우 페이지를 새로고침 시키게 되는데, Link Component를 사용하면 새로고침 없이 페이지를 변경 시킬 수 있다. Link Component는 Router 안에서만 동작한다. > Link 컴포넌트는 HTML5 History API를 사용하여 브라우저의 주소만 바꿀 뿐, 페이지를 새로 불러오지는 않는다. 참고 블로그 https://gomgomkim.tistory.com/9

okayoon

React 프론트엔드 개발자가 많이 사용하는 도구 2위 인기 있는 라이브러리 React에 대해서 공부해보겠습니다. React는 Facebook에서 만든 Javascript UI 라이브러리이며 오픈소스로 공개되어있습니다. 일단 공부하기 위해서 React 공식문서에 접속해보면 메인에 '라이브러리'라고 큼지막하게 써있는 문구를 볼 수 있습니다. "사용자 인터페이스를 만들기 위한 Javascript 라이브러리" Library? 언젠간 프레임워크라고 들었던것 같기도한데..? 라는 생각이 스쳤는데 아마도 그것은 Vuejs였던것 같습니다. 공식문서에서도 분

okayoon

React 프론트엔드 개발자가 많이 사용하는 도구 2위 인기 있는 라이브러리 React에 대해서 공부해보겠습니다. React는 Facebook에서 만든 Javascript UI 라이브러리이며 오픈소스로 공개되어있습니다. 일단 공부하기 위해서 React 공식문서에 접속해보면 메인에 '라이브러리'라고 큼지막하게 써있는 문구를 볼 수 있습니다. "사용자 인터페이스를 만들기 위한 Javascript 라이브러리" Library? 언젠간 프레임워크라고 들었던것 같기도한데..? 라는 생각이 스쳤는데 아마도 그것은 Vuejs였던것 같습니다. 공식문서에서도 분명하게