본문 바로가기

WEB/REACT23

Ref를 좀 더 잘 써볼까? (forwardRef와 useImperativeHandle) 들어가며: React의 Ref 전달 문제 React의 컴포넌트에서 ref를 전달하려고 하면 문제가 발생한다.// 🚨 동작하지 않는 코드const Input = (props) => { return ;};// 부모 컴포넌트const Parent = () => { const inputRef = useRef(null); return ; // ref가 전달되지 않음};이는 React가 기본적으로 ref를 일반 prop으로 전달하지 않기 때문입니다. 이런 제한이 있는 이유는:1. 캡슐화 유지: 내부 구현 세부사항을 보호2. 예측 가능한 데이터 흐름 보장3. 불필요한 노출 방지 forwardRef: React의 공식적인 ref 전달 메커니즘React 공식 문서에 따르면, `forwardRef`는 다음과 같은 .. 2024. 6. 28.

[☄️트러블슈팅] useEffect 내 setState 무한루프 원래 문제가 없던 코드에 이번에 border를 linear로 바꾸면서 set함수를 배열로 두개 넣어주다보니 에러가 발생했다. # 원래 코드 useEffect(() => { if (isPost.data?.isAllSeen == false) { for (let i = 0; i < isPost.data?.seenPostList.length; i++) { if (isPost.data?.seenPostList[i].isSeen == false) { if (isPost.data?.seenPostList[i].isPublic == true) { setBorderColor(['#6935FD', '#9747FF']); setIndex(i); break; } if (isPost.data?.seenPostList[i].is.. 2023. 10. 5.

react-query를 짧게 사용해본 회고..랄까...? 지금 진행하고 있는 프로젝트에서 react-query와 recoil을 사용해서 상태관리를 해주고있다. 물론 프로젝트가 아직 끝나지 않았다ㅎㅎ.. 사실 작년까지만 해도 채용공고나 그런 곳들에 Redux가 가득찼었는데 어느 순간부턴가 React-Query의 점유율이 높아지기 시작했다. 공부해야지..해야지..생각하다가 사용하고있는 프로젝트에 우연히 들어가게 되면서 해야만하게 됐다.. 리코일은 이전에 학습해봤는데 리액트 쿼리는 안해봐서 살짝 겁이 났었다 근데 지금 해보니 적용하고 사용하는 데에 있어서는 크게 어렵지 않으니 나처럼 겁먹은 사람이 있다면 일단 해보라고 말하고 싶다. 일단 도대체 요즘 왜 다 리액트 쿼리를 사용하는 건지에 대한 의문이 들었었다. 이해해보려고 자료를 많이 찾아봤는데 자료도 자료지만 직접.. 2023. 4. 4.

리액트에서 setState를 통해서 state를 변경해주는 이유 / setState의 비동기성 리액트를 사용하면서 처음에는 없던 의문이 갑자기 생겼었다. 왜 리액트는 useState라는 훅을 사용해서 상태관리를 하는것인가 물론 훅을 사용해서 라이프사이클을 조작할 수 있게 하여 불필요한 리렌더링을 막아주고, 내가 원하는 시점에 원하는 동작을 하도록 만들어주는 것일 거다. 하지만, 왜!! 자바스크립트에서 변수 사용하듯이 사용하면 안되는것이냐 이게 문득 궁금해졌다 이유 state는 immutable(불변성)을 유지해야하기 때문이다. 컴포넌트는 현재의 this.state와 setState를 비교해서 업데이트가 필요한 경우에만 render 함수를 호출하는데, state를 직접 수정하게 되면 리액트가 render 함수를 호출하지 않아 상태 변경이 일어나도 렌더링이 일어나지 않을 수 있다. 상태 변경을 추적하.. 2022. 10. 21.

Redux 리덕스는 어렵다... Redux? 컴포넌트가 많을수록 복잡해지는 상태를 효율적으로 관리하는 라이브러리 why? 구조가 점점 복잡해지면서 부모 컴포넌트부터 최하위 컴포넌트까지 내려오면서 상태를 관리하는 것은 너무 비효율적! 리덕스로 바깥에서 상태관리를 해주면서 효율적으로 접근! 이해가 되지 않는다면 아래와 같은 상황을 보자! 👇 위의 컴포넌트 구조가 아래의 컴포넌트구조와 같이 복잡해졌다고 가정해보자. 이럴 경우, 최하위 자식 컴포넌트까지 상태를 전달해주거나 자식 컴포넌트에서 발생한 이벤트에 의해서 다른 루트에 있는 컴포넌트의 상태변화를 불러일으켜야하는 상태일 경우일 때 비효율적으로 작동하는 것을 볼 수 있다. How? 위에 제가 문제로 제시했던 상황들을 리덕스는 바깥에서 상태관리를 할 수 있도록 도와줌 리.. 2021. 7. 13.

[React] useEffect useEffect를 좀 더 집중적으로 다뤄볼만한 가치가 있다고 느꼈다. 이는 라이프사이클과 직결되어있기 때문에 더 정확히 알고 사용해야겠다고 생각하면서 다시 리다기 책을 오랜만에 펴서 살펴보았다. UseEffect useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 훅이다. componentDidMount + componentDidUpdate componentDidMount + componentDidUpdate + componentWillUnmount 마운트 될 때만 실행하고 싶을 때 (ComponentDidMount) useEffect(() => { console.log('마운트될때만'); },[]); 컴포넌트가 화면에 맨 처음 렌더링 됐을 때만 실행하고 싶을 .. 2021. 7. 6.

이전 1 2 3 4 다음

티스토리툴바