React 기본 : 고객 Component 를 Props 를 이용하여 구조화하는 개념잡기

지난 시간 Git hub에 올려놓은 파일을 기준으로 고객데이터를 출력하는 예제를 나동빈님의 도움을 받아 작성해 보겠습니다. 작성되는 내용은 src 폴더 App.js를 통해서 public 폴더 index.html로 렌더링되는 개념입니다. 

 

이를 위해서 다음과 같은 순서로 작성해 보겠습니다. 

 

▶ src폴더 내 고객 고객데이터를 위한 폴더 및 파일 만들기 

 

폴더이름을 component로 하고 파일이름을 Customer.js로 만듭니다. VS code에서 직접 입력하면 됩니다. 

 

 

▶ Customer.js 코드 작성하기

 

React 라이브러리를 불러와서 작성하고 만들어진 클래스를 export 시키는 개념을 생각하면 됩니다. export시키기 전 만들어지는 코드의 기본은 render(  )함수와 return(  ) 함수가 필요한 점을 기억하면 됩니다. 

 

export 시킬때는 export default 클래스명을 써 줍니다.

 

React.Component 라이브러리에서 상속(extends)받아서 Customer라는 class를 선언합니다.

 

 

상기 코드가 곧 만들고자하는 Customer component라고 보면됩니다. 

 

▶ App.js에서 만들어진 Customer component 실행

 

App.js의 return(  )함수안에다 Customer component 내용을 <Customer />라고 선언합니다. 

 

class 형 component인 관계로 Componet로부터 상속받아 class App을 선언하고 내용을 export default App합니다. 

 

React 로부터 {Component}를 가져와야 하고 Customer.js로부터 Customer 를 불러와야 합니다. 

 

 

 

▶ VS code Terminal에서 yarn start 실행

 

yarn start를 실행시키면 Local host가 열립니다. 그리고 코드에 문제가 없으면 아래와 같은 메시지가 VS code에 보입니다. 

 

※ 아직 초보인 관계로 이유는 잘 모르겠고 Customer 클래스를 불러오기 위해서 src폴더에서 components/customer.js를 지정했는데 Customer처럼 대문자를 사용하니 계속 error가 떠서 전부 소문자로 진행하고 있습니다. 

 

yarn start 실행으로 다음과 같이 브라우저에 표시가 됩니다. 

 

 

브라우저에 표시된다는 것은 index.html내 id="root"라는 곳에 App.js의 코드 내용에 따라 그려지는 것입니다. App component는 실제로는 Customer component이기 때문에 Customer component에 작성된 내용이 App component까지 전달되는 개념이라고 보면됩니다. 

 

▶ Props를 이용하여 데이터 작성하기

 

Customer component내 직접 코딩을 하지 않고 Props라는 속성을 이용하여 데이터를 연결시킵니다. 

 

App.js에 class App 선언전에 Customer 변수를 만들어서 Customer component내 변수를 받는 코딩을 합니다. 

 

 

 

변수를 받을 Customer component 를 만듭니다. 

 

 

 

Customer.js에 가서 props를 이용하여 연동 시킵니다.

 

 

그러면 브라우저에는 같은 내용이 나옵니다. 

 

이제 App.js에 가서 변수로 지정된 cusotmer 내용을 '리액트'에서 '곽두팔'로 바꾸어 봅니다. 

 

 

그러면 브라우저도 같이 곽두팔로 바뀝니다. 

 

 

 

이렇게 Customer component를 만들고 Props 개념을 활용하여 좀 더 구조화된 코딩을 할 수 있는게 React의 기본 개념이라고 보면 됩니다. 

 

아직은 완벽히 이해가 되지는 않지만 예제를 진행하고 공부해 나가면서 저 스스로 깨우쳐 볼겁니다. React를 배우는 이유중 하나는 JavaScript와 비슷한 언어라고 해서 이해하기 위해 배우는 것이고 궁극적으로는 구글 개발자 계정을 통해 제 앱을 하나 만들어 보는게 1차 목표입니다.