[React] 분할정복 Divide and Conquer

학습일 : 2023. 03. 13

---

전에 만들었던 App() 함수를

앞으로 내가 만들 여러 변환기를 고를 수 있도록 만들어 보려고 한다.

 

선택지는 두개이다.

1. 기존의 분/시간 변환기

2. 마일/킬로미터 변환기

 

 

이걸 쉽게 하기 위해서는분할정복이 필요한데리액트는 분할정복이 쉽고 유리한 장점이 있다.

 

 

 

분할정복은 이런식으로..

App() 함수 안에 

<MinutesToHours /> 를 넣어주면

  <script type="text/babel">
    function MinutesToHours() {...}
    
    function App() {
      return (
        <div>
          <h1>시간 변환기</h1>
          <MinutesToHours />
        </div>
      );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>

 

 

이래서 리액트를 쓰는구나!!

중복되는 코드를

저렇게 태그로 바로 넣어주면 코드가 확 줄어들고

 

나중에 프로젝트가 커지고 코드가 길어졌을 때

효율성이 커질 듯.

 

분할정복을 했을 때와 아닐때와 

실행결과는 같다.

1. 시간 변환기 글씨

2. 시간변환기 input, button

이 제대로 들어와있음을 볼 수 있다.

 

하지만,

둘이 서로 다른 컴포넌트이기 때문에

따로노는 점이 발생하긴 하는데

그래서 이전 코드에서 적용해놓은 css 즉, 마진 속성들이 비틀어지는데

이 문제는 차차 알아보는 것으로..