[LAB-4] forwardRef 관련 질문이 있습니다.

ssw6750 commented 1 year ago

질문 작성자

서석원

문제 상황

모달창 웹접근성 리팩토링 중 forwardRef를 사용하게 되어서 관련 공부를 하는 중입니다. 2가지 질문이 있습니다,

1. 함수 선언식에서의 forwardRef 사용법 저는 함수 컴포넌트를 짤 때 함수 선언식을 사용합니다. 공식 문서 forwardRef 에서는 함수 표현식으로 forwardRef의 사용법을 알려주고 있는데 함수 선언식으로는 어떻게 짜야할지 헷갈립니다. 해당 코드를 선언식으로 어떻게 짜는지 알려주시면 감사하겠습니다.,..!!

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

2. forwardRef말고, LiftingStateUp 또는 리코일 같은 전역 상태관리로 ref를 연결할 수 있나요?

코드 검토 리소스

React는 구성된 개발 환경에 따라 문제 상황이 다르고, 상황을 정확히 분석해야 문제를 해결할 수 있습니다. 문제 상황을 온라인 개발 도구 환경에서 구현하여 제시하거나, GitHub 저장소를 이용해 질문주시길 바랍니다.

환경 정보

환경과 관련된 문제가 의심될 경우 작성합니다. (입력 선택 사항)

운영체제 종류 (예: Windows, macOS)
Node.js 버전 (예: v16.15.0)

shoveller commented 1 year ago

안녕하세요. @ssw6750 님. 반가와요. 잘 지내고 계신가요?

함수 선언식에서의 forwardRef 사용법

제가 질문을 잘 이해했다면 아래와 같이 구현할 수 있을 것입니다.

const FancyButton = React.forwardRef(function 컴포넌트의이름(props, ref) {
  return (
    <button ref={ref} className="FancyButton">
      {props.children}
    </button>
  );

forwardRef말고, LiftingStateUp 또는 리코일 같은 전역 상태관리로 ref를 연결할 수 있나요?

네! ref도 객체로 취급되므로 어느쪽이든 가능합니다. 그런데.. react.js 의 탄생 비화 등을 살펴보면.. react.js는 단방향 데이터 통신에 어울리게 만들어졌으므로 LiftingStateUp 대신 flux 패턴을 사용하시길 권하고 싶어요. 프로그램 규모가 커지면 정말 손쓸수 없는 에러를 마주하게 될 수도 있습니다.

ssw6750 commented 1 year ago

아하!! 이해했습니다~~ 피드백 감사합니다!!

yamoo9 / likelion-FEQA