생활코딩 React 강의 복습

 

어찌저찌 여기까지는 대충 만들었는데.... 일단 구조 짜기가 어려워서 생활코딩 강의를 다시 들으며 필기해보려고 한다.

궁금한 점: 반응형은 어떻게 만드는가? 왼쪽 요소들이 포토샵의 자유변형처럼 알아서 비율에 맞게 늘어났다 줄어들었다 했으면 좋겠어...

Component 만들기 

사용자 정의 태그는 함수를 정의하면 된다.
React에서 사용자 정의 태그륾 만들 떄는 반드시 대문자로 시작해야 한다.

function Header () {
	return ( <header>
    		<h1><a href="/">WEB</a></h1>
        </header>
	)}

사용자 정의 태그를 사용하면 수정했을 떄 위 태그를 쓴 모든 곳에서 내용이 바뀌는 것을 볼 수 있다.
React에서는 사용자 정의 태그를 Component 라고 부른다.
이 Component를 만드는 React 덕에 우리는 여러 개의 태그를 하나의 독립된 부품으로 만들 수 있게 되었고 이 부품을 위해 더 적은 복잡도로 소프트웨어를 만들 수 있다. 다른 사람이 만든 컴포넌트를 내가 쓸 수도 있고, 내가 만든 컴포넌트를 남이 쓸 수 있어 생산성을 강화한다.

 

Props

우리가 만든 컴포넌트도 속성을 가질 수 있다면?
img 태그의 경우 src, width, height 등의 속성을 가진다.
Header에 title 값을 주면, "WEB"이라는 글자가 바뀌었으면 좋겠다. 어떻게 하면 좋을까?
Header란 내가 만든 컴포넌트 함수이다. Header의 Parameter에 Props 라는 이름을 줘 보기로 한다. 사실 Props라는 이름은 다른 것으로 바뀌어도 상관없다.

function Header (Props) {
	return ( <header>
    		<h1><a href="/">WEB</a></h1>
        </header>
	)}
    
    
function App() {
	return {
    	<div>
        	<Header title="REACT"></Header>
        </div>
    );
	}

이 때, console.log를 찍어보면 props.title은 "REACT" 이다.

function Header (Props) {
	return ( <header>
    		<h1><a href="/">{props.title}</a></h1>
        </header>
	)}
    
    
function App() {
	return {
    	<div>
        	<Header title="REACT"></Header>
        </div>
    );
	}

이렇게 하면 같은 결과가 나온다. 중괄호는 표현식으로 취급된다.

function Header (Props) {
	return ( <header>
    		<h1><a href="/">{props.title}</a></h1>
        </header>
	)}
function Nav() {
	return  <nav>
    	<ol>
        	<li><a href="/read/1">html</a></li>
            <li><a href="/read/2">css</a></li>
            <li><a href="/read/3">js</a></li>
        </ol>
    </nav>
	}
function Article (Props) {
	return  <article>
    		<h2>{props.title}</h2>
            {props.body}            
        </header>
	)}
    
    
function App() {
	return {
    	<div>
        	<Header title="REACT"></Header>
            <Nav></Nav>
            <Article title="Welcome" body="Hello, WEB"></Article>
        </div>
    );
	}

Article의 title과 body도 변하도록 할 수 있다.

Nav도 props를 주어서 주입된 값으로 li가 생성된다면 얼마나 좋을까?
그러기 위해서는 li에 들어가는 정보를 js의 데이터 구조에 맞게 입력시켜야 한다.
app 안에 topics 라는 변수를 만든다. 이 변수는 함수 안에서는 바뀌지 않기에 const를 적용했다. 
const를 사용하면 뒤에서 코드를 바꿀 수 없다.

function Header (Props) {
	return ( <header>
    		<h1><a href="/">{props.title}</a></h1>
        </header>
	)}
function Nav() {
	return  <nav>
    	<ol>
        	<li><a href="/read/1">html</a></li>
            <li><a href="/read/2">css</a></li>
            <li><a href="/read/3">js</a></li>
        </ol>
    </nav>
	}
function Article (Props) {
	return  <article>
    		<h2>{props.title}</h2>
            {props.body}            
        </header>
	)}
    
    
function App() {
	const topics = [
    	{id:1, title:'html', body:'html is...'}
        {id:2, title:'css', body:'css is...'}
        {id:3, title:'js', body:'js is...'}
  	  ]
	return {
    	<div>
        	<Header title="REACT"></Header>
            <Nav></Nav>
            <Article title="Welcome" body="Hello, WEB"></Article>
        </div>
    );
	}

이 topics를 nav에 prop으로 전달해 본다.

function Header (Props) {
	return ( <header>
    		<h1><a href="/">{props.title}</a></h1>
        </header>
	)}
function Nav(props) {
	return  <nav>
    	<ol>
        	<li><a href="/read/1">html</a></li>
            <li><a href="/read/2">css</a></li>
            <li><a href="/read/3">js</a></li>
        </ol>
    </nav>
	}
function Article (Props) {
	return  <article>
    		<h2>{props.title}</h2>
            {props.body}            
        </header>
	)}
    
    
function App() {
	const topics = [
    	{id:1, title:'html', body:'html is...'}
        {id:2, title:'css', body:'css is...'}
        {id:3, title:'js', body:'js is...'}
  	  ]
	return {
    	<div>
        	<Header title="REACT"></Header>
            <Nav topics={topics}></Nav>
            <Article title="Welcome" body="Hello, WEB"></Article>
        </div>
    );
	}

그 이전에 이해해야 할 게 있다. 먼저 Nav 안에 const로 배열을 만들어 주었다. 그리고 우리가 담으려고 하는 코드를 배열에 담아주었다. 이 배열을 ol 밑에 넣으면 하나씩 순서대로 배치시켜 준다.

function Header (Props) {
	return ( <header>
    		<h1><a href="/">{props.title}</a></h1>
        </header>
	)}
function Nav(props) {
	const lis = [
    	<li><a href="/read/1">html</a></li>,
        <li><a href="/read/2">css</a></li>,
        <li><a href="/read/3">js</a></li>
        ]
	return  <nav>
    	<ol>
        	{lis}
        </ol>
    </nav>
	}
function Article (Props) {
	return  <article>
    		<h2>{props.title}</h2>
            {props.body}            
        </header>
	)}
    
    
function App() {
	const topics = [
    	{id:1, title:'html', body:'html is...'}
        {id:2, title:'css', body:'css is...'}
        {id:3, title:'js', body:'js is...'}
  	  ]
	return {
    	<div>
        	<Header title="REACT"></Header>
            <Nav topics={topics}></Nav>
            <Article title="Welcome" body="Hello, WEB"></Article>
        </div>
    );
	}