[생활코딩] React 04. 속성 props

html 태그를 보자.

<img src = "logo.png" width="100" height="100">

<img>라는 태그 안에 사진파일 / 넓이 / 높이 등의 속성을 설정할 수 있도록 할 수 있다. 

React 에서도 이러한 속성을 "PROP"라고 한다.

아래의 소스를 기준으로 props를 React에서 어떻게 활용하는 지 알아보자

<img> 태그의 속성 처럼 우리도 <Header>, <Nav>, <Article> 태그에 props을 부여하여 커스텀을 해보겠다. 

 <Header>, <Nav>, <Article> 태그의 정의 되어 있는 부분이 아닌 app()에서 본문을 출력하는 내용에서 
글 내용을 변경하려고 하면 다음과 같다. 
function app()에서 어떤 내용을 넣고 싶은지 부터 살펴보면

이와 같이 title속성과 body속성을 추가하여 내용을 app() 출력 시 변경해보려고 한다. 
단순히 이렇게만 하면 변경되지 않는다. 
추가적으로 우리가 정의한 <Header>,<Article> 태그를 속성이 적용되도록 수정해보도록 한다.

{} 안에 들어가 있는 글들은 일반적은 문자열이 아니라 표현식으로 인식하게 되서 이런식으로 작성하게 되면 정상적으로 반영됨을 확인할 수 있다.

다음으로 <Nav> 태그도 다른 태그들과 같이 props의 주입된 값에 따라서 <li>가 만들어 질 수있게 할 수 있다. 

우선, topics 라는 변수를 만들어 Nav의 <li>태그를 담을 수 있는 형태로 구성한다. 
return 시 Nav 태그의 topics 내용을 {}안에 담아 문자열이 아닌 변수 자체를 인식하게 만들어 준다.

다음으로 Nav 함수에서 lis 변수를 만들어 내용이 추가된 만큼 화면에 출력할 수 있게 for문을 돌려준다. 
<li> 태그에 key를 만들어준 이유는 각 각의 <li> 태그들은 각 자의 key라는 props을 가지고 있어야 되고 해당 반복문 안에서는 unique 해야 되기 때문에 key값을 잡아 줬다.