220404 웹TIL) 컴포넌트,map() 함수, JSX의 유래

1. 컴포넌트를 효율적으로 출력하기 

일단 이 사진은 

컴포넌트를 많이 만들어야 한다면 이 방법은 효율적이지 않다. 새 음식을 추가할때마다 <Food fav="..."/>를 복사해야 한다. 또한 서버에서 음식 데이터를 받아 출력하는 경우, 음식 데이터의 개수를 알 수 없다면 더 문제가 된다. 

그래서 이와 같이 배열을 만들고 안에 속성값을 넣음으로써 많은 양(?)의 컴포넌트도 대비한다. 

 

2. map() 함수 

map() 함수의 인자로 전달한 함수는 배열 friends의 원소를 대상으로 실행 

friends에는 4개의 원소가 있으니 함수는 4번 실행된다. 

두번째는 그 함수가 반환한 값이 모여 배열이 되고 > 그 배열이 map() 함수의 반환값이 된다. 

 

console.log에서 current가 출력되고 

return 0;에서 0을 반환한다. 

이름 뒤에 하트를 붙이고 싶다면? 

함수의 인자 이름을 current 대신 friend라고 설정 (꼭 current일 필요는 없다) 

중요한 건 인자의 이름이 아니라 인자의 배열에 들어있는 원소가 "1개씩 전달"되면서 함수가 반복 실행된다. 

 

3. App.js 

리액트가 갖고 있는 Component라는 클래스를 상속해서 새로운 App 클래스를 만든다.

그리고 그 클래스는 render라는 메소드를 가지고 있다 (컴포넌트를 만드는 구조가 App.js라고 생각) 

import React, { Component } from 'react';
import './App.css'; 

class Subject extends Component { 
	render() { 
    	return ( 
        	<header> 
            	<h1> helllo </h1> 
                ~
            </header> 
        
        
        ~

render()도 함수이다. 우리가 알고 있는 일반적인 함수는 앞에 function이라는 키워드가 붙는데 하지만 JS의 최신 스펙에 들어 있는 클래스 문법은 소속되는 함수의 function 키워드 생략 

 

return 이라고 적힌 부분에 <header> 부분이 있는데 여기서 조심해야 할 것은 컴포넌트를 만들 때 반드시 하나의 최상위 태그로 시작해야 한다 여기서는 <header>가 최상위 태그 

 

웹 브라우저는 이 세상에 리액트라는 기술이 있는지 알지 못한다. App.js는 개발자가 작성한 코드이고 리액트가 최종적으로 웹 브라우저에게 변경된 HTML 코드를 공급하기 때문에 웹 브라우저는 리액트가 있는지 알지 못한다. 

App.js는 유사 JS로 순수 JS가 아니다. 자바스크립트와 거의 비슷하지만 자바스크립트에서 태그를 작성할 때는 따옴표를 코드상에 표현하기 위한 문법이 까다롭다. 

 

App.js 코드는 이런 것들을 쉽게 작성할 수 있게 페이스북에서 만든 JSX 언어 사용. JSX로 코드 작성하면 Create React App이 알아서 자바스크립트 코드로 변환해준다. 

<컴포넌트화> 

다른 책에서는 컴포넌트 클래스를 만들어서 사용하지 않고, 함수 안에서만 컴포넌트를 사용해서 만들었는데

이 책은 신기하게 컴포넌트 클래스(객체지향 개념 이용)해서 만드는게 신기했다. 

import React, { Component } from 'react';
import './App.css'; 

class Subject extends Component { 
	... 생략 ... 
} 

class TOC extends Component { 
	render() { 
    	return (
        	<nav> // 최상위 태그
            	<ul> 
                	<li><a href="1.html">HTML</a></li>
                    <li><a href="2.html">CSS</a></li>
                    <li><a href="3.html">Javascript</a></li>
                </ul>
            </nav>
        ); 
      }
  } 
  
class Content extends Component { 
	render() { 
    	return ( 
        	<article>
            	<h2>HTML</h2>
                HTML is HyperText Markup Language. 
             </article> 
         );
     }
} 

class App extends Component { 
	render() { 
    	return ( 
        	<div className="App"> 
            		<Subject></Subject>
                    <TOC></TOC>
                    <Content></Content>
            </div> 
       );
     }
} 

export default App;

* TOC : Table Of Content 목차 

<nav> 부분을 TOC라는 컴포넌트로 변경했다(만들었다) 

<article> 부분을 컴포넌트로 해서 Content 컴포넌트를 만들었다. 

 

> 널브러진 물건을 캐비닛 같은 곳에 정리정돈 한다는 개념 !