1. 컴포넌트 만들기

 

function App() {
	return (
        <div>
            <header>
                <h1><a href="/">WEB</a></h1>
            <header>
            <nav>
                <ol>
                    <li><a href="/read/1">html</a></li>
                    <li><a href="/read/2">css</a></li>
                    <li><a href="/read/3">javascript</a></li>
                </ol>
            </nav>
            <article>
                <h2>Welcome</h2>
                Hello, WEB
            </article>
        </div>
    );
}

export default App;

위의 코드를 아래와 같이 컴포넌트로 만들어서 사용할 수 있다!

컴포넌트를 만들 때 이름은 꼭 대문자로 시작해야한다.

function Header() {
	return 
    <header>
        <h1><a href="/">WEB</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">javascript</a></li>
        </ol>
    </nav>
}

function Article() {
	return 
    <article>
        <h2>Welcome</h2>
        Hello, WEB
    </article>
}

function App() {
	return (
    	<div>
            <Header></Header>
            <Nav></Nav>
            <Article></Article>
        </div>
    );
}

export default App;

 

 

리액트의 본질은 컴포넌트 !!!!!!!

 

 

출처 - 

https://www.youtube.com/watch?v=WT58gOl8Eh8&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=4