React 기초 : Component 및 Props를 이용하여 게시판 구조 이해하기

이번 시간에는 JSX문법을 사용하고 있는 React의 Component와 props를 이용하여 게시판 구조에 대한 모습을 한번 볼게요. 먼저 게시판의 가장 기본 구성 항목이라고 볼 수 있는 것은 사용자이름과 사진 그리고 게시판 글제목과 내용정도로 구분이 될 수 있을겁니다.

 

다음과 같은 결과물을 한번 만들어 볼까 합니다. 

(참고로 React는 나동빈님의 강의를 기본으로 연습하고 좀 더 눈높이에 맞게 이해내용을 가미하여 공유합니다. )

 

 

 

---

▒ 게시판 구조 이해하기 

 

1. 필요항목

 

사진 : image source 필요

이름 : name 속성 사용

게시판 제목 : title 속성 사용

게시판 내용 : content 속성 사용

 

2. Component를 어떻게 사용할 건가

 

Component는 하나로 사용해서 필요속성 4가지를 나타내고 나중에 ReactDOM.render(  ) 함수에 나타낼 수 있는데 '재사용'과 '단순화'의 기본방침에 따라 사진과 이름 Component는 따로 분리

 

Component명에서 사용자 관련 (이미지와 이름)은 User(props)로 정의하고 게시판 관련(제목과 내용)은 Board(props)로 정의 

 

※ 저는 상기 내역을 이해해 보기 위하여 종이에 그림을 그려서 각각 Component의 역할을 고민해보니 이해가 더 쉽게 다가 왔습니다. 

 

---

▒ 코딩하기 (위에서 아래 순서로)

 

제일 먼저는 HTML에 id="root" 선언하는 거는 이제 기본입니다. 

 

 

1. User Component 선언

 

user의 이미지 {props.user.image.jpg} 와 user의 이름 {props.user.name}을 먼저 선언 하겠습니다. 

 

user의 이미지는 밑에서 정의할 때 불러올 이미지의 주소를 나타내는 javaScript 문법으로 나타 내었습니다. 

 

 

☞  

 

nbsp 는 non-breaking space의 약자로 끊어지지 않는 공간정도로 해석하면 되겠습니다. 사용법은   로 사용하고 한칸 정도 띄어쓰기가 된다고 보면됩니다. (HTML CSS 문법)

 

 

2. 게시판 Board 전체 구성

 

여기서는 위에서 User(props)에 선언된 user의 정보(사진과 이름)을 나타내고 동시에 제목과 내용을 선언하겠습니다. 

보통 게시판은 HTML에서 <section>태그로 많이 구분하니 여기서도 <section>태그를 이용하여 진행합니다. 

 

참고로 <hr>은 HTML 언어에서 가로선을 나타냅니다. 

 

 

3. 게시판 항목 내용 정의 하기 

 

이제 HTML id="root"에 나타내는 내용을 정의해 봅니다. (일반적으로 변수 정의하는 경우와 같습니다.)

 

 

☞ imageUrl 주소 

 

상기 placeimg.com 은 개발자들이 개발용으로 아무 이미지나 반영하고자 할 때 무료로 이용하는 사이트라고 합니다. 사진은 랜덤하게 표시되고요.  '/32/32/any의 뜻이 가로 세로 32크기의 아무사진이나'라는 뜻입니다. 

 

---

 

4. ReactDOM.render(  )에 렌더링 명령

 

이제는 board가 정의 되었으니 브라우저에 나타내는 코딩을 할 차례입니다. 

 

 

 

특히 Board Component를 나타내는데 title, content, user의 속성을 지정해 주는데 여기서는 쉼표 ','가 사용이 되지 않는다고 하니 주의하도록 하지요.

 

---

 

이제부터 코드가 길어져서 한번에 화면캡쳐를 하기에는 무리가 있어 보이네요. JS(Babel) 맨위부터 아래까지 한번 직접 코딩해 보고 결과를 보면서 이해를 하시면 될 것 같습니다.