리액트에서 closest 써도 컨벤션에 어긋나지 않을까요?

클로셋이 제이쿼리에서 있던 함수 아닌가요? 리액트 들어가면 탈제이쿼리 해야되요 저도 뷰2에서 잠깐 넣어서 쓰는데 근데 간단한거 할때만 하고 오브젝트나 배열로 활용하잖아요 대체 할만한 함수로 쓰셔야되요

리액트에서 돔을 다루는 것은 기본적으로 useRef를 사용합니다. 그리고 가상돔에서 해결하는게 훨씬 저렴한 작업이므로 돔 자체를 조작하는것이 아닌 데이터를 조작해서 렌더링을 분기 처리 등을 하는 것이 더 낫습니다.

' closest '나 ' querySelector ' 같은 메서드를 사용하는 것이 구조에 종속적인 코드가 되어 리액트의 기본 원칙과 어긋나는 것은 사실입니다. 리액트에서는 컴포넌트 간의 상태와 이벤트를 명시적으로 전달하고 관리하는 것을 권장합니다. 반복문으로 생성되는 컴포넌트마다 ' onClick ' 함수를 추가하는 방식이 더 리액트스러운 접근입니다. 이렇게 하면 상위 노드를 찾지 않고도 각 컴포넌트에서 이벤트를 처리할 수 있습니다. 아래 예제 코드를 참조하세요. 아래 코드에서는 각 ' Card ' 컴포넌트에 대해 ' onClick ' 이벤트 핸들러를 전달하고, 해당 핸들러를 통해 클릭 시 해당 국가 정보를 처리합니다. 이렇게하면 ' closest '를 사용하지 않고도 이벤트 처리를 할 수 있습니다. 하지만, 상황에 따라서는 DOM 조작 메서드를 사용하는 것이 더 효율적일 때도 있습니다. 이런 경우에는 ' useRef '를 사용하여 해당 DOM 요소에 대한 참조를 얻고, 필요한 처리를 수행할 수 있습니다. 이 방법을 사용하면 리액트의 컨벤션을 따르면서도 DOM 조작을 수행할 수 있습니다. ----- ✅ Chat GPT의 답변을 평가해 주세요! 틀린 내용은 없는지, 답변이 도움이 되었는지 댓글로 작성해 주세요.

1const Card = ({ onClick }) => {
2  return (
3    <div className="card" onClick={onClick}>
4      {/* ... */}
5    </div>
6  );
7};
8
9const CardsContainer = () => {
10  const countries = [
11    // ...
12  ];
13
14  const handleClick = (country) => {
15    console.log(country);
16  };
17
18  return (
19    <div>
20      {countries.map((country) => (
21        <Card key={country.id} onClick={() => handleClick(country)} />
22      ))}
23    </div>
24  );
25};