이번에는 생활코딩 5강,6강에 해당하는 내용을 제 방식대로 풀어서
제!가! 이해하기 쉽게 정리해 보았습니다.😎

React의 속성값 (props)

이 html과 우리의 컴포넌트와 다른점은 바로 src, width와 같은 속성값!
html은 src, width와 같은 속성들 덕분에 이미지태그는 입력값을 가질 수 있게 됨!

여기서 우리는 우리가 만든 컴포넌트도 저렇게 속성을 주고 싶어지게 됨!
리액트는 속성을 prop(프-롭)이라고 부른다고 한다!
우리가 만든 컴포넌트에 이 prop을 장착해보자!

저 라이브서버에 보이는 웹이라고 적혀있는 부분을 컴포넌트를 건들이지 않고
밑의 헤더에게 타이틀값을 입력한 값이 위에 컴포넌트에 반영되어서
라이브서버에 보이는걸 바꾸고 싶다,,,

밑에 App function에 있는 header는 위에 정리한 함수다.

함수옆에 ()안에(props)를 적었는데 이건 아무거나 적어도 되지만 우리는
세상과 props라고 적기로 합의를 봤어요...

일단 이 props를 콘솔로 찍어보면

이걸 보면 알수 있듯이 이 props는 객체가 들어오는데 이 객체는
title이 REACT인것을 알 수 있다.
옆에 아까 적은 내용이다!
우리가 이 REACT라는 텍스트를 얻어 내기 위해서는 props.title이라고 하면 되지 않을까?

오! 잘 나왔다! 그렇다면 저 WEB 부분에 props.title이라 적으면 REACT가 출력 될까?
정답은 출력되지 않는다. 그냥 props.title이 나온다.
react를 출력되게 하려면 {}중괄호 안에 적어야한다

잘 출력된걸 확인 할 수 있다!

여기서 응용을 해보자!

이렇게 추가한 Article은 어떻게 해야 바꿀수 있을까?
BEFORE

AFTER

자 이렇게 우린 props를 사용할줄 알게 되었다!
+1 Level!

이번엔 nav를 속성값을 주기위해 const로 topics를 선언해줬음!

nav안에 topics를 설정해줬다. 여기 적혀진 topics는 단순히 문자열이 전달됨.
만약 있는 그래로 전달하고싶다면 이것 역시 {}중괄호를 해주면 문자열이 아니라 있는 그대로 전달됨.

코드로 정리😀

function Header(props){ 
	console.log('props',props);
	return <header>{props.title}</header> 
    //{} 중괄호 사이의 문자열은 표현식으로 취급
}
function Nav(props){
	const lis = [] //lis는 배열
    for(let i=0; i<props.topics.length; i++){
      //topic의 원소의 숫자만큼 반복이 된다.
    	let t = props.topics[i];
      //그렇게 반복되는 것의 이름을 't'라고 부여.
        lis.push(<li key={t.id}><a href={'/read/'+t.id}>{t.title}</a>
  //tag를 동적으로 만들어 줌. 그리고 링크로 만들어주기땜에 a href 추가
  </li>);
  // 우리가 동적으로 만들어준 하나하나의 li태그들은 (약속된 prop) key라는 값을 가져야 하고 그 값은 반복문 안에서 고유해야 함
//=> 이말은 key={}(props)를 주란말인데 이 값은 고유해야한단말임 이 반복문안에서만
//고유하면 되기때문에 key={t.id} 라고 적으면 밑에 설정해준 아이디를 읽는다.
    }
	return <nav>
    	<ol>
        	{lis}
//저곳에 있는 배열을 리액트에 의해서 배열의 원소를 하나씩 꺼내 여기로 배치시켜준다.
        </ol>
}
function Article(props){
	return <article>
    	<h2>{props.title}</h2>
        {props.body}
    </article>
}
function App(){
	const topics = [
    	{id:1, title:'html', body:'html is ...'},
        {id:2, title:'css', body:'css is ...'},
        {id:3, title:'javascript', body:'javascript is ...'}
    ]
	return{
		<Header title="REACT"></Header> 
        <Nav topics={topics}></Nav> 
        //{}중괄호 안에 전달해야 문자열이 아닌 상태 그대로 전달됨
        <Article title="Welcome" body="Hello,WEB"></Article>
    }
}

자동으로 생성하는 태그들은 React가 추적해야 하는데 추적하는 근거인 key(약속된 props)를 부여해서 React가 성능을 높이고 정확한 동작을 하도록 협조함!

EVENT

자 우리는 header에 클릭하면 이벤트가 뜨게 할거임!

function App(){
	const topics = [
    	{id:1, title:'html', body:'html is ...'},
        {id:2, title:'css', body:'css is ...'},
        {id:3, title:'javascript', body:'javascript is ...'}
    ]
	return{
      
    //Header 컴포넌트에 이벤트 기능 Header를 클릭했을 때 함수를 호출해 작업 실행
    	
		<Header title="REACT" OnChangeMode={function(){alert('Header');}}>
          </Header> 

        <Nav topics={topics} onChangeMode={(id)=>{
        	alert(id);
        }}></Nav> 
        <Article title="Welcome" body="Hello,WEB"></Article>
    }
}

그럼 위에 있는 컴포넌트쪽을 건드려줘야 합니당

	return <header><a href="/" onClick={function(){
      //a태그에다가 onClick이라고 이벤트를 걸어줌
      //그럼 이제 onClick은 순수한 html태그가 아니라 유사 html이 되는거임.
      //여기다 코드를 작성하면 최종적으로 eact가 브라우저가 이해할 수 있는 html로 converting함.
      //우리 태그를 클릭했을때 함수가 호출된다
    }

저 WEB을 선택했을 때 페이지 reload가 일어나지 않게 하려면 어떻게 해야하나?

	return <header><a href="/" onClick={function(event){
      //onClick의 콜백함수로 들어간 함수가 호출될 때 react는 event객체를 첫번째 파라미터로 주입!
      //이벤트 객체는 이벤트 상황을 제어할 수 있는 여러가지 정보와 기능이 있음.
      event.preventDefaul();
      //a태그의 기본 동작을 방지. 클릭해도 reload일어나지 않음
      props.onChangeMode();
      //<Header title="REACT" onChangeMode={function(){alert('Header');}}> 이부분을 호출함.
    }

여러 이벤트 까지 추가한 버전

function Nav(props){
	const lis = []
    for(let i=0; i<props.topics.length; i++){
    	let t = props.topics[i];
        lis.push(<li key={t.id}>
        <a id={t.id} href={'/read/'+t.id} onClick={(event)=>{
        	event.preventDefaul();
            props.onChangeMode(event.target.id);
            //event객체가 가진 target(이벤트를 유발시킨 태그. 여기선 a태그!)id 이벤트를 호출할 때 입력값 주기
        }}>{t.title}</a>
        </li>);
    }
	return <nav>
    	<ol>
        	{lis}
        </ol>
}
function Article(props){
	return <article>
    	<h2>{props.title}</h2>
        {props.body}
    </article>
}
function App(){
	const topics = [
    	{id:1, title:'html', body:'html is ...'},
        {id:2, title:'css', body:'css is ...'},
        {id:3, title:'javascript', body:'javascript is ...'}
    ]
	return{
		<Header title="REACT" onChangeMode={()=>{
        	alert('Header');
        }}></Header> 
        //화살표 함수로 다시 정리 코드 간결해짐.
        <Nav topics={topics} onChangeMode={(id)=>{
        	alert(id);
        }}></Nav> 
        <Article title="Welcome" body="Hello,WEB"></Article>
    }
}

혹시모를 맵함수를 사용한 코드.

const Nav = ({topics,onChangeMode}) => {
             //중괄호넣어서 따로 가져와야함
  return(
    <nav>
    <ol>
      {topics.map(item => (<li key={item.id}>
                  <a id={item.id} href={'/read/'+item.id} 
                  onClick={(e)=>{
                    e.preventDefault()
                    onChangeMode(e.target.id)}
                    }>{item.title}
                  </a>
          </li>))}
    </ol>
</nav>
  )
}