강디너의 개발 일지

React에서 useState는 state값이 변경 될 때마다 해당 컴포넌트가 다시 렌더링을 하는 특성이 있습니다. 그래서 동기적으로 실행되는 자바스크립트 코드에서 setState를 실행하고 해당 state를 가지고 무슨짓을 하려고 할 때 이슈가 되는 경우가 있습니다. 예를 들어보겠습니다. const [fruit, setFruit] = useState({ banana: 0, apple: 0, }); const [errors, setErrors] = useState({ banana: false, apple: false, }) 여러가지 과일들이 있고, 과일이 있는지 여부를 체크할 것입니다. 가볍게 보면 banana와 apple이 0이라서 해당 조건문에 걸리고 setErrors를 하게됩니다. 그리고 check..

React-Query는 이전 React 과제를 할 때 아무것도 모른 상태에서 사용해서 장점을 크게 깨닫지 못했었습니다. 그때 당시에 React-Query를 왜, 어떤 상황에서 사용하는지, 장점이 무엇인지 알고 넘어갔어야 했는데 그저 이런 라이브러리가 있구나 ~ 하고 넘어갔었습니다. 사내 기술 세션에서 React-Query 관련 이야기가 나오고, 발표도 해주셔서 관심이 가고, 도입하려면 스터디가 필요하다는 생각에 따로 공부해야겠다고 마음먹고 적게 되었습니다. 우선 React-Query의 장점은 많지만, 아래 장점들 때문에 프로젝트에서 사용하고 싶었습니다. 서버 데이터 캐싱 데이터 패칭 시 로딩, 에러 처리를 한 곳에서 처리 가능 prefetching, retry 등 다양한 옵션 쉬운 상태 관리 들어가기 전..

A 컴포넌트에서 B 컴포넌트로 데이터를 전달해보겠습니다. Root 컴포넌트입니다. user_id 를 A 컴포넌트에서 받는 작업을 먼저 해줍니다. state = { user_id: '' } getData = (data) =>{ this.setState({user_id: data}); } render(){ return( ) } A컴포넌트 입니다. 아래와 같이 해주면 testFunction이 실행될 때 Root의 user_id는 test 로 값이 바뀝니다. testFunction = () =>{ this.props.fromParent('test'); } B 컴포넌트로 보낼려면 Root 컴포넌트를 수정해야합니다. componentB 로 user_id를 보냅니다. state = { user_id: '' } get..