본문 바로가기

react21

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.

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

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

[React] LifeCycle (라이프사이클, 생명주기) 웹을 공부하다보면 빠질 수 없는게 또 바로 라이프사이클이다. 지금까지 나는 라이프 사이클 개념만 공부를 해서 정확하게 어디에 쓰이고 내가 사용하면서도 이게 라이프사이클이 어떻게 사용되는지조차 정확하게 알지 못하고 넘어갔었는데 이번 기회를 통해 정확히 짚고 넘어가려고 한다. 일단, 구글에 react lifecycle이라고 치면 항상 나오는 그림이 있다. mount부터 unmount까지 좌르륵 있는 사진이다. 나는 그냥 이것만 공부하고 알고있었다. 근데 왜 라이프사이클에 대해서 알아야하는지 근본적인 부분에 대해 부족하다고 느껴서 이번엔 그 부분을 좀 더 자세히 알아보도록 해야겠다! 라이프사이클이란? 라이프 사이클은 간단히 워딩만 보더라도 '한 화면이 생성되고 사라지기까지의 과정'이라고 볼 수 있다. 왜 라이.. 2021. 7. 5.

[React] Rerendering(리렌더링) 리액트를 공부하다보면, 효율성이라는 단어를 빼놓을 수가 없는 것 같다. 저번에 정리했던 DOM에서의 가상 돔도 그렇고, 어떤 한 개념을 공부할 때마다 그 개념이 효율적이게 도와준다고 하는 것이 많다는것이다. 나는 전에 이런 질문을 받은 적이 있다. '리렌더링이 뭔지 아시나요?' 이 글을 보는 여러분들은 무슨 대답을 하겠는가? 나는 그때는 부끄럽지만 리렌더링이 그냥 렌더링을 다시한다는 거 아닌가? 이렇게 생각했었다. 사실 말 뜻은 그렇다. 하지만, 질문의 의도가 과연 진짜 뜻을 물어보는 것이었을까? 이때 모든 질문에 답을 개떡같이 한 나는 집에 와서 차분히 다 적어놨었다. 그리고 다시 공부하면서 채워나가기 시작했다. 리렌더링은 무엇인지 근본부터 알아야하며, 왜 이걸 알아야하는지, 어디에서 이 개념이 쓰이는.. 2021. 6. 24.

파이어베이스(Firebase) - NoSQL,Collection,Document 이번에 프로젝트를 정리하면서 파이어베이스를 사용했던 프로젝트를 다시 보게 되었다. 사용해봤지만 정확히 공부해보고 넘어가야겠다고 생각이 들어서 다시 정리를 해봤다. 파이어베이스에서 내가 사용했던 기능은 Firebase Database(DB)와 Firebase Authentication(Auth)이다. Firebase Auth는 이메일, 구글 등 다양한 sns를 이용한 로그인 인증 기능을 제공하고 있다. 이 부분은 자신이 구현하려고하는 프로젝트에 따라 허용해주어 사용해주면 된다. 이 점은 그다지 어렵지 않았다. 하지만, Firebase DB에 접근해서 정보를 저장하고 꺼내서 쓰는 부분에 있어 처음에 어려움을 느꼈었다. 나에겐 Collection과 Document에 대한 개념이 뒤죽박죽 다가와서 어려웠었는데 .. 2021. 6. 24.

이전 1 2 3 4 다음

티스토리툴바