영역 나누기

src 폴더 내부에 있는 app.js 파일이 실제로 가장 많이 사용될 파일이라고 생각하면 되겟다.

import logo from './logo.svg';
import './App.css';

function App() {

  const testfunction  = () =>{
    console.log("여기는 테스트 함수")
  }


  return (

    // JSX를 사용하는 영역  JSX => 자바스크립트 + XML(HTML) 
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

초기 파일 내부의 코드는 저렇게 생겼으며, function App() 내부에서 return 을 기준으로 그 위쪽은 자바스크립트를 사용할 수 있는 영역

그 아래쪽은 JSX 를 작성할 수 있는 영역으로 나눠져 있다고 보면 되겟다

import React from 'react';
function App() {
  
	// <---- 자바스크립트 영역 ---->

  const click = ()=>{
    alert("클릭")
  }
  return (
  /* <---- HTML/JSX 영역  ---->*/
    <div
      style={{
        height: '100vh',
        display: ' flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
   {/* 이곳에 퀴즈를 위한 html 코드를 작성해 주세요 */}
   <h1>
    이것은 내가 만든 App 컴포넌트 입니다.
   </h1>

   <button onClick={click}>클릭!
   </button>

    </div>
  );
}

export default App;

그래서 예를 들면 위 파일처럼 코드를 변경하는것도 가능하다.

---

---

---

부모-자식 컴포넌트

import React from 'react';

const Child = () => {
  return <div>
    나는 자식 컴포넌트 입니다.
  </div>
}

function App() {
  return (
    <div>
      <Child />
      <Child />
      <Child />
      <Child />
    </div>
  )
}

export default App;

컴포넌트는 클래스 형태로도 사용 가능하지만 보통은 함수형태의 컴포넌트를 더 권장하는 편이다.

그리고 이 컴포넌트끼리도 부모-자식 형태의 계층운용이 가능한데,

위 코드는 그 예시라고 할 수 있다.

참고로 여기서 return 옆에 <div> 태그를 굳이 하나 사용한 이유는 return 문 다음에 오는 태그는

한개 이상 넘으면 오류가 나기 때문에 지금 코드처럼 사용해야한다.

그래서 이 예시의 경우 return 다음에 오는 <`div`> 태그가 따지고보면 부모태그 역할을 할 수 있을것이고, 그 부모태그 안에서 여러번 사용된 Child 함수의 컴포넌트가 자식 컴포넌트가 되겟다 ---

3개의 컴포넌트를 서로 연결해서 해보기

import React from 'react';


const ChildShark = () => {
  return <div>
    나는 아기 상어 컴퍼넌트 입니다.
  </div>
}

const FatherShark = () => {
  return <ChildShark />;
}


const GrandFatherShark = () => {
  return <FatherShark />
}



function App() {
  return <GrandFatherShark />
}

export default App;

컴포넌트 이름은 반드시 대문자로 작성하는것을 꼭 잊지말자 (소문자로 작성하면 실행안됨)

위 코드는 App() 에서는 할아버지 상어를 부르고, 할아버지 상어는 아기상어를, 그리고 아기상어만

유일하게 div 태그를 사용해서 어떤 글을 작성함으로서 총 4가지 컴포넌트가 부모-자식 관계를

형성해서 보여주는 예시 자료이다