weekend studies : REACT 기초 : 함수형 컴포넌트와 props

REACTDOM.render(컴포넌트 오는 자리 , document.getElementById("root"));

여기는 index.js 이다.
index.js에서 마지막 코드인 REACTDOM.render( ) 에는 첫번째 인자로 보통 가 들어가서 동적으로 컴포넌트를 여기저기 옮겨다닐 수있도록
설정을 해주고 두번째 인자로 root라는 id를 가진 index.html과 연결해주어 여러 컴포넌트들을 하나의 html위에 뿌려준다(렌더링)

하지만 지금은 함수형 컴포넌트를 이해하기위해 바로 렌더링할 하나의 컴포넌트 Blog를 만들고 컴포넌트를 index.js페이지 위에 바로 입력할것이다.
( 원래는 코드가 길어질 것이기에 index.js에 코드를 바로 입력하기 보단 여러 컴포넌트파일들을 폴더로 관리하여 서로 연결해주는 방식을 쓴다. )

Blog라는 컴포넌트에 posts라는 (내가 지어준 props이름) props( 프롭스는 key라고 생각하면 된다)와 props의 값인 posting이라는 이름의 배열을 마치 함수에 인자를 넣는 것처럼 전달해준다. posting이라는 배열속에는 id라는 key를 주어 map을 돌려서 나오는 결과물들에 이름표를 붙여주는 것과 같은 효과를 낸다. (붕어빵 틀에서 이름없는 붕어가 여럿 나오는 게 아니고. 단팥이 들어간 단팥붕어. 슈크림들어간 슈크림붕어. id : 단팥. id :슈크림)

posts라는 프롭스를 이제 함수형 컴포넌트안에서 구조분해를 해준다.

const {posts} = props;

는 아래 코드와 같다.

this.props.posts

posts라는 props가 함수컴포넌트 Blog에 전달이 되고 return ( ) 에 들어가게 되는 부분이 화면에 렌더링 될 jsx코드가 들어가는 부분이니까
변수 선언은 return () 위에서 해준다. const sidebar라는 변수와 const content라는 변수 두개를 선언해주고 변수에 들어가있는 자바스크립트 코드를 return ( )안에서 jsx코드로 쓸 때 { } 중괄호 안에 써주면 된다.

const sidebar = (

<ul>
  {posts.map((post)=>{
	<li key={post.id}> {post.title} </li>
})}</ul>

);

sidebar라는 변수에는 ul을 posts에서 post 각각 갯수만큼 render 할것이다. 현재 posting이라는 배열속에 3개의 객체가 있고
3개의 객체가 들어있는 배열 posting이 posts라는 프롭스에 전달이 되었으니 (posting => posts) posts 를 map으로 돌리면 결과적으로 3개의
<li> </li>가 <ul>에 감싸진 채로 나오게 되는 것이다. li의 내용물에 {post.title} 다시말해 posts = posting배열속의 객체들의 key값 중에서 title이라는 key값에 접근하여 화면에는 hello, bonjour,nihao가 차례차례 나오게 된다. 그리고 우리는 컴퓨터가 map이 뱉어낸 결과물들을 하나씩 각각 인지하고 구별할수있도록 li 태그안에 key={post.id}를 작성하는 것도 잊지않는다.

위사진은 코드에 대한 결과를 화면에 띄운것이다. 콘솔창도 열어서 props가 함수형 컴포넌트에 어떻게 전달이 되고있는지 보여준다.
content라는 변수도 sidebar와 같은 원리로 map을 돌려서 3개의 content라는 key의 값을 렌더링 하고 있다.