react 정리

리액트는 사용자 정의 태그(컴포넌트)를 만드는 기술이다.
props는 컴포넌트 외부에서 사용하는 입력값이다.
state는 컴포넌트 내부에서 사용하는 값이다.
이벤트는 props를 이용한다.
event.preventDefalt()를 이용해서 기본동작을 비활성화 할 수 있다.
form을 변경할 때는 props를 state로 전환 후 onchage를 이용한다.

react 의 초입은 src/index.js
index.js는 전역적인 설정이 들어간다.

npm run build -> 배포판을 만드는 명령어
build 폴더가 생긴다 js를 말은 애가 생긴다. 이걸 실행시켜볼려면 npx serve -s build
빌드 폴더안에 index.html파일을 서비스해주는 webserver가 실행이된다.
serve는 node로 만들어진 어플리케이션이다. npx로 실행가능

리액트에서 사용자 정의 태그(컴포넌트)를 만들려면 첫글자는 무조건 대문자

리액트는 속성을 prop이라고 한다.
리액트에서의 중괄호는 표현식으로 취급된다.

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


function Header(props){
  console.log('props', props, props.title);
  return <header>
    <h1><a href='/'>{props.title}</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(props){
  return <article>
    <h2>{props.title}</h2>
    {props.body}
    </article>
  
}
function App() {
  return (
    <div>
      <Header title="react"></Header>
      <Nav></Nav>
      <Article title="welcome~~" body="hello react web"></Article>

    </div>
  );
}

export default App;

컴포넌트 외부에서 주입한 props들은 해당 함수의 매개변수로 받아야하는데 props라고 다들 쓴다. 규칙

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={(e)=>{
        e.preventDefault();
        props.onChangeMode(e.target.id);
      }}>
        {t.title}
      </a>
    </li>);
  }
  return <nav>
    <ol>
      {lis}
  </ol>
  </nav>
  
}

onClick의 콜백함수로 들어가는 저 함수가 호출될때 리액트는 이벤트 객체를 첫번째 파라미터로 주입해준다.
이벤트 객체는 이벤트 상황을 제어할수있는 여러가지 정보와 기능이 들어가있다.
event.preventDefault()함수의 경우 태그의 기본동작을 막는다
타겟은 event유발시킨 태그를 가르킨다

prop과 state가 바뀔때 새로운 리턴값을 만들어서 ui를 바꾼다
차이점은 prop은 컴포넌트를 사용하는 외부자를 위한 데이터
state는 컴포넌트를 만드는 내부자를 위한 데이터