코지코더 React 7. 컴포넌트로 반복 제거

컴포넌트에 대해 설명하겠다.

그 전에 앞서 먼저 간단한 코드를 작성해보자

코드를 해석하면 click을 누르면 {count}에 의해 버튼 옆에 숫자가 카운팅된다.

3번 클릭해 카운팅 된 모습

 

 

이러한 버튼 3개를 만든다면 다음과 같이 코드를 작성한다.

코드 결과물

비슷한 코드가 반복되는 것을 볼 수 있다. 이것을 수정하려면 일일이 다 수정해주어야 하기 때문에 많은 수고가 든다. 그래서 이런 번거로움을 없애기 위해서 컴포넌트를 사용한다.

컴포넌트의 구성은 App.js와 같이 import하여 react를 가져오고 함수를 작성하여 jsx를 리턴하면 다른 곳에서 사용할 수 있게 된다.

 

 

그렇다면 컴포넌트를 이용하여 위와 같은 결과가 나오도록 만들어보자.

src 폴더에 components라는 폴더를 만들고 Counter라는 js파일을 만들어보자. 그리고 버튼을 만들어보자.

이렇게 만든 파일을 이제 App에 올리자.

importCounterfrom'./components/Counter';
아까 만들었던 Counter파일을 import하였다. 

이후 버튼을 배치할 위치에 <Counter />를 입력했다.

그리고 실행시켜 본 결과 다음과 같이 나타났다.

앞서 길게 썼던 코드와 지금의 코드가 다름에도 불구하고 결과는 동일하게 나타난 것을 알 수 있다.

 

 

컴포넌트를 사용하지 않은 코드

컴포넌트를 사용한 코드

 이 두 코드를 비교해보면 컴포넌트를 이용한 코드가 훨씬 짧고 간편하며 유지보수하기 편하다. 그렇기 때문에 컴포넌트를 사용하는 것을 알 수 있다.

⁂ 느낀 점 ⁂

컴포넌트는 웹페이지를 만들 때 따로 css, js를 추가하는 것과 비슷한 느낌이다. 그래서인지 컴포넌트 개념을 이해하는 것이 어렵지 않았다.

 

- 문제점 발견(21.5.26)-

블로그에서 코드 블럭을 쓰면 return 이후의 코드가 프로그램에서 실행되는 것 마냥 나와서 코드가 안보이는 문제가 있다. 이것을 방지하기 위해서는 앞으로 코드를 캡쳐해서 올리는 방향으로 수정하겠다.