리액트 OOP 객체지향 핵심개념 및 필요성

https://swfungineer.medium.com/react-개발자-웹-개발자-를-위한-oop-객체지향-프로그래밍의-핵심-개념-및-필요성-c5537aca853f

React 개발자(웹 개발자)를 위한 OOP: 객체지향 프로그래밍의 핵심 개념 및 필요성



위의 글을 참고로 공부용으로 테스트코드를 작성해본다.

 

테스트 코드

1. Render Props 패턴: 다른 컴포넌트로부터 함수를 전달받아 해당 함수를 실행하여 JSX를 반환한다. 이 방법을 사용하면 다른 컴포넌트의 기능을 함수형 컴포넌트 내에서 사용할 수 있다.

const DataTest = ({render}) =>{
  const datas = [1,2,3,4,8]
  return(
    <h3 class="gkfla">
      {datas.map((item,index)=>(
        <h4 key={index}>{render(item)}</h4>
      ))}
    </h3>
  )
}

export default function App() {
  return (
    <>
      <h1>
        <DataTest render={(data)=>( //h3 //인자는 DataTest에서 받는다.
        //맵안에있는 {render(item)} 로 이게 가서 반복한다 거기서 인자를 이쪽으로 보내서 데이터가 나옴.
          <div> 
            <h2>텍스트 : 테스트{data}</h2>
          </div>
        )}/>
      </h1>
      )}

 

굳이 이렇게까지 왔다갔다 할필요가있나 인자까지 생각해야하는게..? 라고 생각했는데

유지보수 면에서는 편할수도있다는 생각이든다 하지만 가독성이 떨어지지않을까..?