https://react-ko.dev/learn/manipulating-the-dom-with-refs 명령형 핸들 (useImperativeHandle) useImperativeHandle은 부모 컴포넌트에 대한 ref 값으로 고유한 특수 객체를 제공하도록 React에 지시한다. 결과적으로 Form 컴포넌트 내부의 inputRef.current에는 focus 메서드만 존재한다. 부모컴포넌트에 DOM 기능을 선택적으로 제공할 수 있다. ref 조작은 DOM 노드가 아닌 useImperativeHandle() 내부에서 생성한 사용자 정의 객체이다. = ref에 할당된 것은 DOM 노드가 아니라 useImperativeHandle에서 생성한 사용자 정의 객체다. 일반적으로 렌더링 중에는 ref에 액세스하는 ..
Programming/React
쓰니까 쓰지말고 뭔지 알고 쓰자 📌 key props key props는 배열을 렌더링 할 때 필요한 속성으로 React는 각각의 요소를 고유하게 식별할 수 있으므로, 변경된 요소만 업데이트하며 이를 통해 React의 성능을 향상 시킬 수 있다. 📌 Key props를 배열의 인덱스로? 만약 key props를 지정하지 않으면 React는 기본적으로 배열의 인덱스를 사용하여 요소를 식별한다. 이 경우 배열의 요소가 추가, 삭제, 이동 등 변경 될 때마다 React는 배열 요소의 인덱스를 다시 계산하고, 변경된 부분을 업데이트한다. 이 과정에서 각 요소가 리렌더링 되므로 성능상의 문제가 발생할 수 있다. 그렇기 때문에 key props의 값으로는 각 요소를 고유하게 식별할 수 있는 값을 사용한다. (본인은..
쓰니까 쓰지말고 뭔지 알고 쓰자 useState의 setter 함수는 비동기적으로 실행된다. 대표적인 예시로 1씩 카운트가 증가하는 코드가 있다. const [count, setCount] = useState(0); const countHandler = () => { setCount(count + 1); setCount(count + 1); setCount(count + 1); } 위 코드의 count 결과값은 1이다. React는 렌더링 최적화를 위해 setState연산이 한꺼번에 수행되며 이는 배치(일괄)로 처리하기 때문이다. 📌 함수형 업데이트 그렇다면 이전 상태를 참조해 동기적인 업데이트를 수행하고 싶다. 이 때 함수형 업데이트를 이용한다. const [count, setCount] = useSt..
리액트 클래스 컴포넌트를 사용할 경우에는 this를 신경 써서 작성해야 합니다. 생성자(constructor) 함수 안에서 state를 정의할 경우, 자식 컴포넌트로 전달한 props에 접근할 경우, 컴포넌트에서 선언한 메서드를 참조할 경우 등 this를 사용하고 있음을 확인할 수 있습니다. 이번 포스팅에서 클래스 컴포넌트의 이벤트 처리 시 this 바인딩이 어떤 식으로 되고 있는지 알아보겠습니다. this javascript의 this는 일반적으로 함수를 호출하는 객체에 대한 참조이다. (자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수) 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. this는 다음번에 자세히 알아보도록 하겠습..
📌 클래스 컴포넌트 정의 React의 클래스 컴포넌트 정의 방법은 2가지가 있다. 하나는 React.Component 다른 하나는 React.PureComponent 이 두 가지의 방식의 차이점은 shouldComponentUpdate() 라이프사이클을 다루는 방식이 다르다는 점이다. class Han extends React.Component { render() { return React.Component; } } class Woo extends React.PureComponent { render() { return React.PureComponent; } } React.PureComponent는 shouldComponentUpdate가 이미 구현되어 있는데, props와 state를 얕은 비교를 통해..
리액트 프로젝트 구성요소를 자세히 살펴보면 index.js에서 아래와 같은 코드를 볼 수 있다. ReactDOM.render(, document.getElementById("root")); 이것은 public폴더 index.html파일의 id = "root"인 요소의 자식으로 App 컴포넌트를 렌더링 하는 코드이다. 그런데 어떠한 이유로 부모 컴포넌트 바깥에서 자식 컴포넌트를 렌더링 하는 경우도 생기는데 예를 들면 모달 같은 경우가 있겠다. 📌 사용법 ReactDOM.render() 함수로 인해 root의 자식 요소로 배치되는데 외부에 존재하는 DOM 노드가 React App DOM의 계층 안에 존재하는 것처럼 컴포넌트를 연결해주는 포탈 기능을 제공한다. ReactDOM.createPortal(, 배치할..
들어가며 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용이 가능한데,리액트 v16.8 이후부터는 함수형 컴포넌트에서 hooks 개념이 도입되면서 라이프 사이클과 같은 작업을 처리할 수 있다. 그럼에도 불구하고 클래스형 컴포넌트에선 어떠한 라이프사이클 메소드가 있고 어떻게 사용하는지 알고 넘어가야 할 것 같아서 정리한다. 그리고 혹시나 회사의 레거시 코드가 클래스형 컴포넌트로 작성되어 있을 수도 있으니까 대비할겸..? 라이프사이클 리액트는 컴포넌트 기반의 view만을 신경쓰는, view 중심 라이브러리이기 때문에 각각의 컴포넌트에는 생명주기, 라이프사이클이 존재한다. 컴포넌트의 생명주기는 렌더링 되기 전 준비과정(mount)에서 시작해 페이지에서 사라질 때(unmount) 끝이난다. 마운트(mount) ..
