프로그래밍/React

[react-router-dom] Link와 NavLink 차이점 정리, 리액트 라우터 react에서 router 처리를 할 때, Link, Nav 두 컴포넌트를 자주 사용합니다. 정확한 이해없이 사용했던 것 같아 공식 문서를 바탕으로 특징 및 차이점을 정리해보았습니다. 공통점과 차이점 Link와 Nav 두 컴포넌트 모두 화면에 태그로 렌더링 되고, to 속성에 정의해 둔 url로 이동하는 기능을 한다는 점에서 동일합니다. 공식문서에서는 NavLink에 관해 아래와 같이 정의되어 있습니다. NavLink 는 Link의 특별한 버전입니다. 현재 URL과 클릭시 이동할 URL이 같을 경우, "style 속성" 을 추가해주는 기능을 가지고 있습니다. 스타일 외에도 추가 기능으로 선택된 NavLink의 경우 a..

[React] Forwarding Refs 로 refs 전달하기 이전 포스팅에서 알아본 것 처럼, 상위 컴포넌트에서 자손 컴포넌트의 DOM을 컨트롤하기 위해 ref를 전달하는 방법엔 여러가지가 있다. 그 중, React 16.3 이후 버전일 경우 사용할 수 있는 React.forwardRef에 대해 알아보려고 한다. * ref의 기본 사용방법을 알아보려면 이전 포스팅을 참고 [React] React.createRef() 에 대한 정리 [React] React.createRef() 에 대한 정리 React 프로젝트 실무를 하면서 Ref 를 많이 사용하였지만 세부적으로 학습한 적이 없었다. 이번 포스팅에서 Ref 에 관해서 공식 문서에서 공부한 내용을 바탕으 nuhends.tistory.com React.f..

[React] React.createRef() 에 대한 정리 React 프로젝트 실무를 하면서 Ref를 많이 사용하였지만 세부적으로 학습한 적이 없었다. 이번 포스팅에서 Ref에 관해서 공식 문서에서 공부한 내용을 바탕으로 정리해보려고 한다. Ref는 언제 사용하는가? Ref 관련 공식 문서에서는 다음과 같이 정의하고 있다. Ref 는 render 메서드에서 생성된 DOM 노드 혹은 React Element에 접근하는 방법을 제공합니다. React의 일반적인 Data Flow에서 부모와 자식 컴포넌트가 인터렉션 할 수 있는 유일한 수단은 props이다 (자식 컴포넌트를 수정 방법: 새로운 props를 전달 → 자식 컴포넌트 새롭게 렌더링) 하지만 일반적인 데이터 플로우가 아니라 자식 컴포넌트를 직접 수정..