생활코딩 리액트 2022 ver (1)

* 본 포스팅은 생활코딩 리액트(2022)의 요약본입니다! 강의 링크는 포스팅 아래에 첨부하겠습니다 ^__^

 

리액트란?

사용자 정의 태그를 만드는 기술이다!

이 사용자 정의 태그를 리액트에서는 '컴포넌트'라고 부른다.

import React from "react";
import "./style.css";

function Header() {
return (
  <header>
    <h1>Header!</h1>
  </header>
)
}

function Nav() {
return (
  <nav>
    <ol>
      <li><a href="/read/1">1.html</a></li>
      <li><a href="/read/2">2.css</a></li>
      <li><a href="/read/3">3.js</a></li>
    </ol>
  </nav>
)
}

function Article() {
return (
  <article>
    <h2>Hello!</h2>
    Welcome to my Blog!
  </article>
)
}

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

export default App;

 

 

props

html태그의 속성과 같은 개념을 리액트에서는 prop이라고 한다.

매개변수로 전달된 props는 return문 안에서 중괄호 안에 담겨 사용된다.

또한 반복문안에서 생성하는 태그와 같이 자동생성되는 태그들은 리액트가 추적할때 근거가 필요하기 때문에, 그 근거로서 리액트에게 key라는 약속된 prop을 넘겨줘야한다. ( 아래 코드에서 주석처리한 부분 참고 )

import React from "react";
import "./style.css";

function Header(props) {
return (
  <header>
    <h1>{props.title}</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>)
    //반복문에서 li태그에 key prop을 unique하게 주어야하기 때문에 t.id를 넘겨줌!
  }
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:'javascript', body:'javascript is ...'}
  ]
  return (
    <div>
      <Header title="WEB"></Header>
      <Nav topics={topics}></Nav>
      <Article title="Hello!!" body="welcome!!"></Article>
    </div>
  );
}

export default App;

 

이벤트 처리

이벤트를 구현하고싶다면 컴포넌트 태그를 사용할때 props로 함수를 넘겨주면 된다.

우선 아래 코드는 Header태그의 a태그를 클릭했을때 'Header'라는 알람이 뜨도록 작성한 코드이다.

아래 코드에서는 볼때 편의를 위해 Header와 App만 남겼다.

import React from "react";
import "./style.css";

function Header(props) {
return (
  <header>
    <h1><a href="/" onClick={function(event){
        event.preventDefault();
        // a태그의 기본기능을 막아줌.
        props.onChangeMode();
        // 밑에서 Header태그를 사용할때 작성한 onChangeMode함수가 실행되도록 함.
    }}>{props.title}</a></h1>
  </header>
)
}

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="WEB" onChangeMode={function(){
        alert('Header');
      }}></Header>
    </div>
  );
}

export default App;

그리고 위에서 작성한 부분을 arrow function으로 나타낼수도 있는데, 바꾼 코드는 아래와 같다. (주석 참고)

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

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="WEB" onChangeMode={()=>{ //arrow function
        alert('Header');
      }}></Header>
      <Nav topics={topics}></Nav>
      <Article title="Hello!!" body="welcome!!"></Article>
    </div>
  );
}

이 외에 Nav태그에도 이벤트를 적용해서 각각 누르면 id가 팝업창 알림으로 뜨도록 한 전체코드는 아래와 같다.

import React from "react";
import "./style.css";

function Header(props) {
return (
  <header>
    <h1><a href="/" onClick={(event)=>{
        event.preventDefault();
        props.onChangeMode();
    }}>{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);
      }}>{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:'javascript', body:'javascript is ...'}
  ]
  return (
    <div>
      <Header title="WEB" onChangeMode={()=>{
        alert('Header');
      }}></Header>
      <Nav topics={topics} onChangeMode={(id)=>{
        alert(id);
      }}></Nav>
      <Article title="Hello!!" body="welcome!!"></Article>
    </div>
  );
}

export default App;

 

state

리액트 컴포넌트에는 입력과 출력이 있다. 입력은 prop이고, 이렇게 prop으로 들어온 데이터를 컴포넌트 함수가 처리해서 return값을 만들면 그것이 새로운 ui가 된다.

그리고 여기서 prop과 함께 컴포넌트 함수를 다시 실행해서 새로운 return값을 만들어주는 또 하나의 중요한 요소가 있는데, 그것이 바로 state이다.

 

prop과 state 모두 그 값이 변경되면 새로운 return값을 만들어서 ui를 바꾼다. 

그런데 prop가 컴포넌트를 사용하는 외부자를 위한 데이터라면, state는 컴포넌트를 만드는 내부자를 위한 데이터라는 차이점이 있다.

 

또한, useState는 배열을 리턴하고 그 배열의 0번째 원소는 상태의 값을 읽을때 쓰는 데이터, 1번째 원소는 그 상태의 값을 변경할때 사용하는 함수이다.

import React from "react";
import "./style.css";
import {useState} from 'react';

function Header(props) {
return (
  <header>
    <h1><a href="/" onClick={(event)=>{
        event.preventDefault();
        props.onChangeMode();
    }}>{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(Number(event.target.id));
      }}>{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 _mode = useState('WELCOME'); // 여기서 useState()의 매개변수는 state의 초기값이고, useState는 배열을 리턴함.
  const mode = _mode[0]; // mode를 통해 상태의 값을 읽을 수 있다.
  const setMode = _mode[1]; // setmode를 통해 mode의 값을 바꿀 수 있다.
  // 위의 세줄을 한줄로 줄이면 다음과 같다. > const [mode, setMode] = useState('WELCOME');
  const [id, setId] = useState(null);
  const topics = [
    {id:1, title:'html', body:'html is ...'},
    {id:2, title:'css', body:'css is ...'},
    {id:3, title:'javascript', body:'javascript is ...'}
  ]
  let content = null;
  if(mode==='WELCOME'){
    content = <Article title="WELCOME" body="Hello, WEB"></Article>
  }else if(mode==='READ'){
    let title, body = null;
    for(let i=0; i<topics.length; i++){
      if(topics[i].id===id){
        title = topics[i].title;
        body = topics[i].body;
      }
    }
    content = <Article title={title} body={body}></Article>
  }
  return (
    <div>
      <Header title="WEB" onChangeMode={()=>{
        setMode('WELCOME');
      }}></Header>
      <Nav topics={topics} onChangeMode={(_id)=>{
        setMode('READ');
        setId(_id);
      }}></Nav>
      {content}
    </div>
  );
}

export default App;

 

이렇게 리액트의 READ를 모두 확인했고,

다음 포스팅에서는 CREATE, UPDATE, DELETE에 대해 알아보자.

https://youtu.be/AoMv0SIjZL8