React 컴포넌트 / PROP(props) + arrow function에 대해

 

컴포넌트 (component)

react는 사용자 정의 태그를 만드는 기술 = react의 본질

 

정리정돈 → 연관된 것들은 모아서 그룹핑 하는 것

 

ex.

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

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'>js</a></li>
        </ol>
      </nav>
      <article>
        <h2>Welcome</h2>
        hello, web!
      </article>
    </div>
  );
}

export default App;

<header>를 사용자 정의 태그로 만들고 싶다. 정리정돈하고 싶다.

↓

//react에서 사용자 정의 태그를 만들 때는 반드시 대문자부터 시작해야 한다!

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

function Header(){
  return <header>
  <h1><a href='/'>WEB</a></h1>
</header>
}
function App() {
  return (
    <div>
      <Header></Header> {/* 사용자 정의 태그 === '컴포넌트' */}
      <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>
      <article>
        <h2>Welcome</h2>
        hello, web!
      </article>
    </div>
  );
}

export default App;

활용을 더 해보자면?

↓

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

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'>js</a></li>
  </ol>
</nav>
}

function Article(){
  return <article>
  <h2>Welcome</h2>
  hello, web!
</article>
}

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

export default App;

 

정리:

컴포넌트를 만드는 react 덕분에 여러 태그들을 독립된 부품으로 만들 수 있고, 부품을 이용해 적은 복잡도로  sw를 만들 수 있다. 또한, 내가 만든 컴포넌트를 다른 사람에게 공유할 수 있고 다른 사람이 만든 컴포넌트를 내가 만든 프로젝트에서도 사용할 수 있게 되면서, 생산성을 획기적으로 끌어올리는 역할을 한다! → 거대한 react 생태계😮

 

---

PROP (props)

react에서 만든 컴포넌트에도 속성을 넣자! → props (즉, 속성 === props)

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

function Header(props){
  return <header>
  <h1><a href='/' onClick={(event)=>{ // === function(event){}
    event.preventDefault(); // 처음에 그냥 눌리면 클릭 이벤트 발생하지 않게 
    props.onChangeMode(); // 누르면 alert 띄우는 이벤트 발생 시키는 함수
  }
  }>{props.title}</a></h1>
</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.preventDefault();
      props.onChangeMode(event.target.id);
      //내부의 onChangeMode를 호출하는 것이니까 props를 이용해 호출하는 것
      //event.target이라는 것은 이벤트를 발생시킨 타겟을 말하는 건데, 이는 <a>태그를 말하는 것임
    }}>{t.title}</a></li>)
  }
  return <nav>
  <ol>
    {lis}
  </ol>
</nav>
}

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:'JS', body:'JS is ...!'},
  ]
  return (
    <div>
      <Header title="Web" onChangeMode={()=>{ // === function(){}
        alert("Header!")
      }}>
      </Header>
      <Nav topics={topics} onChangeMode={(id)=>{
        alert(id);
      }}></Nav>
      <Article title="Welcome" body="hi, react~ my name is lena!"></Article>
      <Article title="hi" body="choi is csmaster!!"></Article>
    </div>
  );
}

export default App;

 

=> 이것의 의미는 무엇일까? 🤨 ↓

 

arrow function

onClick={function(event){
	event.preventDefault();
}}

// 위의 코드를 arrow function을 이용하면 아래와 같이 바꿀 수 있다.
// "의미는 똑같은 코드!"

onClick={(event)=>{
	event.preventDefault();
}}

 

ㅇ