react 기능 component 구분 방법

설명 전)

react component는 page별로 또는 header 및 bottom, sidemenu 구분해서 필요 요소를 블록형식으로 return 안에 html안에 구분해서 재사용을 했습니다. 

그런데 기능으로 따로 구분을 해서 재사용을 할려면 return안에 사용하는 것이 아닌 function 안에 따로 불러와야하기때문에 한페이지 안에서 진행하는거면 상관이 없는데 따로 component를 만들어서 import에서 사용할 때에는 여러 변수가 생길 수 있다는 것을 알아두셔야합니다. 

 

먼저 간단하게 어떻게 기능 component를 만들어야하는 지 설명하겠습니다. 더 좋은 방법이 있으면 추천해주시길 바랍니다. 

1. src>TestAction.js를 생성하고 해당 코드를 복사해서 붙여놓습니다. 

import TestClass from "./TestClass";
function TestAction() {

  const Test= () => {
    const value1 = TestClass("test1", "test2");
  };

  return (
    <div>
      <h1>테스트</h1>
      <button
        onClick={() => {
          Test();
        }}
      >
        Test
      </button>
    </div>
  );
}

export default TestAction;

 

추가 설명) Test 버튼 클릭하면 해당 TestClass component 기능이 실행될 수 있게 셋팅했습니다. 

2. src>TestClass.js를 생성하고 해당 코드를 복사해서 붙여놓습니다. 

const TestClass = (initialUrl, initialData) => {
  console.log("initialUrl", initialUrl);
  console.log("initialData", initialData);
  return "value1";
};

export default TestClass;

추가 설명) 

테스트 확인: TestAction에서 TestClass() 매개변수 전달한 initialUrl, initialData에 값이 각각 "test1", "test2"가 나오는 지 확인합니다. 

- 이유 : 제대로 import되었는 지 확인 

 

3. src>TestAction.js에서 const value1 값이 TestClass return 값 "value1" 값이 정상적으로 나오는 지 확인합니다. 

 

설명 목적)

지금 이부분은 react라기보다는 react에서 javascript 영역 부분만 설명한 것입니다. 이유는 지금처럼 기능만 따로 빼내서 useState 및 useEffect등 react hook을 사용할려고 하면

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following 

이런 에러가 발생합니다. 

 

그럼 여기서 생각할 수 있는 것은 useContext, redux로 접근해야한다고 생각할 수 있습니다. 

그런데 redux는 보통 데이터 상태 관리 즉 예를 들면 user 정보를 api 호출해서 자주 사용해야한다면 redux로 상태관리해서 꺼내서 사용할 때 이용하고 useContext는 App.js에서 Provider로 사용하기 때문에 전역으로 관리하는 부분도 있지만 사실 redux와 같은 맥락이기 때문에 지금처럼 기능 component로 어떻게든 나눠서 재사용을 해야한다면 

hook을 사용하지 않고 순수 javascript로 return해서 구분하는 방법으로 접근해야합니다.