프론트엔드/React2 [react-query] 단일 진실 공급원을 고려하며 수정 form 만들기 Intro 원티드 프리온보딩 1월 - 리액트 쿼리 강의를 듣던 중, server state와 client state에 대한 얘기가 나왔다. server state 값을 client state에 할당해서 재사용할 때의 문제점에 대해 논했는데, 많이 공감되는 주제라 글을 쓰게 되었다. server state 만약 useQuery가 userDetail이라는 data를 리턴한다면 userDetail을 그대로 사용하면 된다. const { data : userDeail } = useQuery(...); 복제 근데 유저의 정보를 수정해야 한다면, userDetail을 변경할 수 없으니 새로운 client state를 만들어서 userDetail 값을 할당해주곤 했었다. 즉, 원본이 여러 개(?) 생기는 셈이 된다... 2023. 1. 18. [리액트] 합성 패턴으로 컴포넌트 만들기 - 1 (인풋) Intro 기획팀 요청으로 선택 버튼이 있는 인풋을 구현한 적이 있다. 요청 사항 - 인풋은 유저가 직접 값을 입력할 수 없음 - 인풋의 값은 선택 버튼 클릭 후 등장하는 드롭다운의 옵션 중 선택 고려 사항 흰색 박스가 input처럼 보이지만, 실제 input 태그는 하늘색으로 표시한 영역이고 흰색 박스는 label과 input을 감싸는 div 태그이다. 공통 컴포넌트 Label, Input, Button을 조합해서 아래처럼 만들었다. import styled from "styled-components"; import Label from "./components/Label/Label"; import Input from "./components/Input/Input"; import Button from ".. 2023. 1. 13. 이전 1 다음
