본문 바로가기

Ref3

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] 스크롤박스 코드에 위아래 이동 기능 구현 📖리액트를 다루는 기술📖 책에 있는 ref예제인 스크롤 박스 조작 코드는 '맨밑으로'라는 버튼을 누르면 자동으로 스크롤을 맨 밑으로 내려가게 해주는 내용이다. 하지만, 나는 여기서 응용하기 위해서 버튼을 누를 때마다 스크롤 박스가 위, 아래로 이동할 수 있도록 구현하고 싶었다. 리액트를 다룬지 얼마 되지 않아 처음에는 이미 작성되어져 있는 코드를 어디서부터 손 대야 될지 막막했지만, 앞에서 했던 예제들을 이용해서 곧장 방법을 찾아낼 수 있었다. 일단 스크롤이 내려가있을때는 버튼을 누르면 올라와야하고, 올라가있을 때는 내려와야하기 때문에 상황에 따라 값이 달라지기 때문에 이에 대한 초기값들을 설정해줘야한다. 이에 따라 앞 장에서의 예제들을 떠올려서 state에 대한 초기값을 App.js에 설정해주었다. s.. 2021. 1. 2.

[React] ref 오늘은 ref에 대해서 공부해보았다. 리액트를 다루는 기술 책을 보면서 공부를 하다가 ref에 대해서 이해가 부족해서 공식문서를 찾아보게 되었다. ko.reactjs.org/docs/refs-and-the-dom.html ref(Reference) ref는 레퍼런스라는 뜻인데, 이를 번역하면 참조라는 말이다. 과연 코딩에서 참조라는 것은 어떤 것을 뜻하는 것일까? 원래 다른 언어를 배울 때, 참조는 복제와 비교가 되었었다. 복제는 파일을 복사하는 것이라면, 참조는 바로가기를 만드는 것과 같다고 비유되었다. 참조는 원본 파일에 대한 주소 값이 담겨있어서 누군가가 이 바로가기에 접근했다면 여기에 저장된 원본의 주소를 참조해서 원본의 위치를 알아내고 원본에 대한 작업을 하게 되는 것이다. 쉽게 말하면, 원격으.. 2021. 1. 1.

이전 1 다음

티스토리툴바