생활코딩 react 간단 정리 및 실습

[React] : 사용자 정의 태그를 만들기 위한 도구
주로 class와 function을 통해 만드는데 function추세

[수정] : index.js -> 입구 파일 / index.css, App.js -> App.scc

[배포] npm run build(build 파일 생성) -> npx serve -s build (build 파일을 npm명령으로 배포)

<배포까지 실습>

수정 후 배포 모습

[컴포넌트] : 복잡한 태그를 하나의 사용자 지정 태그로 만들어 내는 것 -> 폭발적인 생산성 향상

[props] : 컴포넌트 태그의 속성을 지정해주면 그 값을 props를 통해 컴포넌트로 받아옴
*key : 무언가를 반복해서 받아올 때 무엇을 받아와야 하는지 나타내 주는 지표

import "./App.css";

function Header(props) {
  return (
    <header>
      <h1>
        <a href="/">{props.title}</a>
      </h1>
    </header>
  );
}

function Nav(props) {
  const list = [];
  props.topics.map((topic) => {
    list.push(
      <li key={topic.id}>
        <a href={"/read/" + topic.id}>{topic.title}</a>
      </li>
    );
    return null;
  });

  return (
    <nav>
      <ol>{list}</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: "javascript", body: "javascript is ..." },
  ];

  return (
    <div>
      <Header title="React"></Header>
      <Nav topics={topics}></Nav>
      <Article title="Web" body="Hello, Web"></Article>
    </div>
  );
}

export default App;

[이벤트] : 이벤트 함수로 일어나는 일
*event.preventDefault; -> 태그의 기본적인 동작을 막아줌 ex) <a onClick={(e) => {e.preventDefault();}}

<실습>

import "./App.css";

function Header(props) {
  return (
    <header>
      <h1>
        <a
          href="/"
          onClick={(e) => {
            e.preventDefault();
            props.onChangeMode();
          }}
        >
          {props.title}
        </a>
      </h1>
    </header>
  );
}

function Nav(props) {
  const list = [];
  props.topics.map((topic) => {
    list.push(
      <li key={topic.id}>
        <a
          id={topic.id}
          href={"/read/" + topic.id}
          onClick={(e) => {
            e.preventDefault();
            props.onChangeMode(e.target.id);
          }}
        >
          {topic.title}
        </a>
      </li>
    );
    return null;
  });

  return (
    <nav>
      <ol>{list}</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: "javascript", body: "javascript is ..." },
  ];

  return (
    <div>
      <Header
        title="React"
        onChangeMode={() => {
          alert("header");
        }}
      ></Header>
      <Nav
        topics={topics}
        onChangeMode={(id) => {
          alert(id);
        }}
      ></Nav>
      <Article title="Web" body="Hello, Web"></Article>
    </div>
  );
}

export default App;

[useState]: 변수를 상태로 리턴해줌
*수업 중 몰랐던 내용: 숫자를 태그의 속성으로 넘기면 문자열이 됨
*event.target: 이벤트가 발생한 태그를 가르킴

const _mode = useState("WELCOME");
const mode = _mode[0];
const setmode = _mode[1];

const [mode, setMode] = useState("WELCOME");

<범객체상태를 변경해야 할땐 -> 복제를 통해서 만들어야 함>

const [tnut, setTnut] = useState({
	face: "handsome",
    heght: "171",
    weight: "top secret"
});
const newTnut = [...tnut]; //복제
const UpdatedTnut = {face: "ugly"};
newTnut = updatedTnut;
setTnut(newTnut);

https://github.com/lhj0954/WEB2-React.git