리액트를 하면 상태 관리라는 단어를 많이 들을 것이다. 일단 state의 유형부터 알아보자. state의 유형 - local state 특정 컴포넌트 안에서만 영향을 끼치는 상태. - Cross-Component State 여러가지 컴포넌트에서 영향을 끼치는 상태. Props Drilling 방식 필요 - global state 모든 컴포넌트에 영향을 끼치는 상태. Props Drilling 방식 필요 Props Drilling? Props Drilling은 말그대로 드릴처럼 밑으로 구멍을 뚫어 프로퍼티를 하위 컴포넌트로 전달하는 과정이라고 생각하면 된다. 하지만 이 과정이 깊어진다면 props를 추적하기 힘들어진다. 이런 문제를 해결하기 위해 나온 것이 바로 State Management, 상태관리 라..
리액트를 하다보면 'props', 'state'라는 말을 많이 들어봤을 것이다. 언뜻 보기엔 비슷해보이지만 엄연히 다르다. React 공식 문서에서는 이렇게 정의한다. props (“properties”의 줄임말) 와 state는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다. 출처: https://ko.reactjs.org/docs/faq-state.html#gatsby-focus-wrapper props 부모 컴포넌트에서 자식 컴포넌트로 전달하는 데이터(단방향 데이터 흐름을 가..
Toggle 컴포넌트에서 아이콘을 누르면 토글이 보이고 토글 밖을 클릭했을 때 토글이 사라지는 걸 구현하려고 했다. 나는 아이콘을 감싸는 div 태그에 onClick과 onBlur를 넣고 div 클릭 시 onClick 이벤트로 isOpen을 true or false div 밖 클릭 시 onBlur 이벤트로 isOpen을 false 하면 된다고 생각하고 구현했다. Toggle 컴포넌트 예시 // Toggle 컴포넌트 예시 const [isOpen, setIsOpen] = useState(false); return ( setIsOpen((prev) => !prev)} onBlur={() => setIsOpen(false)} tabIndex="0" > {isOpen && ( console.log('라벨 클릭!..
프로젝트 중 회원가입 로직을 짜다가 한가지 문제가 발생했다. FormData 객체를 통해 유저의 프로필 이미지와 유저의 정보를 저장하여 백엔드로 보내야 한다. 프로필 이미지는 multipart/form-data, 유저 정보는 application/json 형식으로 보내려고 이렇게 작성했다. const formData = new FormData(); userData = { ... }; formData.append('img', img); formData.append('userData', new Blob([JSON.stringify(data)], {type: 'application/json'})); SignUp.mutate(formData); 이미지는 File로 저장되고, 유저의 정보는 json을 Blob 객..
import React from 'react'; import PropTypes from 'prop-types'; import * as Style from 'components/Input/Input.styles'; export default function Input ({ status, icon, ...props }) { return ( {icon && {icon}} ); }; Input.propTypes = { status: PropTypes.oneOf(['default', 'error']), icon: PropTypes.element, }; Input.defaultProps = { status: 'default', }; Input 컴포넌트를 만들고 useRef를 사용해서 접근하려고 했지만 이런 오류가 ..
