2020-9-11 재사용한 컴포넌트 생각해보기.

배경

리액트를 이용해서 프론트 컴포넌트를 만들었을때, 페이지별로 그냥 컴포넌트를 만들었었다. 이렇게 하다보니 재사용 가능한 컴포넌트들이 없었다. 언젠가 리액트가 추구하는 철학이 재사용 가능한 컴포넌트… 관련 글을 읽은적이 있었다. 작게나마 코드를 참조해서 적용해봤다.

const TextInput = ({ item, onChange }) => {
  return (
    <div>
      {!isEmpty(item?.labelText) && (
        <label>
          {item.labelText}
        </label>
      )}
      <div>
        <div>
          <input
            name={item.name}
            type={item.inputType}
            placeholder={item.placeholder}
            onChange={onChange}
          />
        </div>
        {item?.button}
      </div>
    </div>
  );
};

위의 컴포넌트는 함께 프로젝트하고 있는 친구의 코드작성 예시다. 처음에 내가 input과 관련된 컴포넌트를 만들었을때, Input에 대해서만 컴포넌트화를 하는것이 아닌 그냥 컴포넌트안에 input을 여러개를 만들었었다. 코드분석을 하다가. 이런 방법을 알게되었고, 나도 설계를 할때. 좋은 모델이 있어서 적용해봤다. 프론트엔드는 어렵다. 복잡도가 너무 높기때문에. 하… 좀 더 재사용 가능한 컴포넌트를 만드는것도 꿈이지만 그보다는 상태관리부터 제대로 하길 바란다..

Written on September 11, 2020