3일차 - react component 와 props

✅component

react는 사용자 정의 태그를 만드는 기술이다. 이것이 react의 본질이다. 

react에서 사용자 정의 태그를 만들 때는 무조건 대문자로! , 소문자 태그는 html태그이다.

react는 이 사용자 정의 태그를 component라고 하는 것이다. 

function Header(props){
  return (
    <header>
        <h1><a href='/read/1'>{props.title}</a></h1> 
      </header>
  )
}

function App() {
   
  return (
    <div className="App">
      <Header title="react"></Header>
    </div>
  );
}

export default App;

 

function Header(props){}와 <Header title="react"></Header>처럼 함수명과 component 태크명 일치시키기!

 

※ 함수는 x라는 입력값에 따라 y라는 결과가 나온다. 

함수의 x -> 변수 , 파라미터 

 

✅props

props - 속성

props 는 properties 의 줄임말이다.   컴포넌트에 어떤 값을 주냐에 따라 다른 값을 가질 수 있게 해준다. 즉 유사 태그를 가질 수 있게 해준다. (태그 안에 넣는 값들!! )

import logo from './logo.svg';
import './App.css';
function Header(props){
  console.log('props',props.title);
  return (
    <header>
        <h1><a href='/read/1'>{props.title}</a></h1> 
        {}-> 중괄호는 일반적인 문자열이 아니라 표현식으로 나타내기 때문에 해석이 되는 것
      </header>

  )
}

function App() {
   
  return (
    <div className="App">
      <Header title="react"></Header>
      <Nav title='topics'></Nav>
      <Article title="welcome" body="hello, web"></Article>
    </div>
  );
}

export default App;

 

 

✅{} 의 역할

function Nav(){
  const lis = [
    <li>전공</li>,
    <li>나이</li>,
    <li>취미</li>  
  ]
  
  return (
    <nav>
        <ol>
          {lis}  
        </ol>
      </nav>

  )
}

 

이때 react에 의해 lis배열의 원소들을 하나씩 꺼내서 <ol> 태크 안으로 배치 시켜준다.

 

하지만 우리가 해야할 것은 props에 topics로 전달 된 값을 받아서 동적으로 태그를 담아서 배열에 담기 

import logo from './logo.svg';
import './App.css';
function Header(props){
  console.log('props',props.title);
  return (
    <header>
        <h1><a href='#'>{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 href={'/read/' + t.id}>{t.title}</a></li>)
  }
  /*react는 자동으로 생성한 태그들의 경우에는 react가 태그들을 추적해야 하는데 추적할 때 근거가 필요하다.*/
  /*그 근거로써 key라고 하는 약속된 props을 부여함으로써 react가 성능을 높이고 정확한 동작을 하게 한다.*/ 
 
  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:'html is ....'},
    {id:3 , title:'javascript', body:'javascript is ....'},

  ]
   
  return (
    <div className="App">
      <Header title="react"></Header>
      <Nav topics={topics}></Nav>
      <Article title="welcome" body="hello, web"></Article>
    </div>
  );
}

export default App;

Nav컴포넌트에서 빈 배열을 만들어서 반복문을 통해 props로 전달받은 변수로 리스트를 만들 수 있다는 것이 포인트이다! 

그리고 href 안에서도 {}중괄호를 활용이 가능하다. 

react는 어디서든 중괄호만 있으면 코드가 완성된다는 것이 참 신기하다