2023.09.04(React JS필기 정리)

SaGo_MunGcci·2023년 9월 4일

TIL nomad coder reactjs

ReactJS

목록 보기

1/9

Nomad Coder - ReactJS로 영화 웹 서비스 만들기

1.reat 설치하거나(terminal로 설치) import하기

2.React JS의 규칙 중 하나는 HTML을 이 페이지에 직접 작성하지 않는다.

span,button등의 엘리멘트를 JS로 만든다.

3.html body태그안에 아무것도 없게 되는데 이것을 밀어넣어 주는것이 react dom(react-dom@17.0.2)이다.

모든 react element들을 html body에 밀어넣어 준다.

react@17.0.2는 react Js엔진으로 interactive한 UI를 생성해준다.

바닐라 js에선 html을 먼저 만들고, 그걸 자바스크립트로 가져와서 html을 수정하는 프로세스를 가지고 있다.
그러나 reactJS에서는 모든것이 자바스크립트로 시작한고 로직 실행후 HTML이 된다. --> 이것이 reactJS의 핵심이다.

자바스크립트와 리엑트 js를 사용하여 엘리먼트들을 생성할때에는 리엑트JS가 엘리먼트를 생성한다.
이 말은 리엑트JS는 업데이트가 필요한 엘리먼트를 업데이트 할 것이라는 말이다. 즉 리엑트JS에서 바로 HTML을 업데이트할수 있다.

바닐라JS


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <span>Total Click : 0</span>
    <button id="btn">CntBtn</button>
  </body>
  <script>
    let cnt = 0
    const span = document.querySelector('span')
    const cntBtn = document.querySelector('#btn')

    cntBtn.addEventListener('click', cntHandler)

    function cntHandler() {
      cnt++
      span.innerText = `Total Click : ${cnt}`
    }
  </script>
</html>

ReactJS(문법 그대로)


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <script>
    // ** React.createElement()내용을 잘보기

    const root = document.querySelector('#root')

    // react로 span태그를 생성
    // 매개변수 순서 (엘리먼트, id or class , contents) 아래 잘보기
    // 여기서 h3이라는 것이 component이다.
    const h3 = React.createElement(
      'h3',
      //{ id: 'sexy-span', style: { color: 'blue' } },
      {
        id: 'sexy-span',
        style: { color: 'blue' },
        onMouseEnter: () => console.log('mouseEntered'),
      }, // 이부분을 propertys --> props
      'hello reactWorld im span',
    )
    // react로 button태그를 생성
    const button = React.createElement(
      'button',
      { onClick: () => console.log('im clicked') },
      'Click me',
    )

    // react로 생성한 span, button 엘리먼트를 가지고 있는 div태그 생성 --> 배열로 나타내고 있는 것을 잘보자
    const container = React.createElement('div', null, [h3, button])
    ReactDOM.render(container, root) // 생성한 element를 root인 위치에 그려줌(ReactDOM.render())
  </script>
</html>

ReactJS(jsx문법)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <!-- react import -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <!-- babel import(jsx ->react로 변환) -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- 바벨 사용시 type 입력해주어야 한다. -->
  <script type="text/babel">
    // ** React.createElement()내용을 잘보기

    const root = document.querySelector('#root')

    //jsx --> html의 형식을 그대로 사용해서 html에 밀어넣어주는 react에서 사용 할 수 있는 문법
    //jsx 변수
    /*
     const title = (
       <h3 id="title" onMouseEnter={() => console.log('mouseEntered')}>
         hello im title
       </h3>
     )
     */

    /*
     const btn = (
       <button
         style={{ backgroundColor: 'tomato' }}
         onClick={() => console.log('im clicked')}
       >
         Click me
       </button>
     )
      */

    //jsx 함수
    // 아래 2함수는 같은 개념이다.
    function Title() {
      return (
        <h3 id="title" onMouseEnter={() => console.log('mouseEntered')}>
          hello im title
        </h3>
      )
    }

    const Btn = () => (
      <button
        style={{ backgroundColor: 'tomato' }}
        onClick={() => console.log('im clicked')}
      >
        Click me
      </button>
    )
    // ==> title, btn이 reactindex1.html의 h3, button과 같은 코드인데, jsx의 문법을 바로 사용 할 수없다.
    // jsx의 문법을 react로 변환시켜주어야 하는데, babel이라는 라이브러리를 사용해서 변환가능하다.
    // 이것이 이전 강의에서 react로 어렵게 배운이유

    // react로 생성한 span, button 엘리먼트를 가지고 있는 div태그 생성 --> 배열로 나타내고 있는 것을 잘보자
    //const container = React.createElement('div', null, [title, btn])
    // const Container = <div>Title, btn</div> 이렇게 입력하고 렌더링하면 그냥 text인 title, btn이 출력되어 버린다.
    // 이것을 해결하려면 아래와 같은 방식으로 작성하고, 해당 component를 함수로 만들어야 한다.

    // **컴포넌트는 항상 첫글자는 대문자로 입력하자(변수 또한 마찬가지)**
    // -> 우리가 직접 만든 요소는 전부 대문자로 시작해야 함

    const Container = (
      <div>
        <Title />
        <Btn />
      </div>
    )
    //ReactDOM.render(Container, root) // 생성한 element를 root인 위치에 그려줌(ReactDOM.render())
    const ContainerMethod = () => (
      <div>
        <Title />
        <Btn />
      </div>
    )

    // react 문법 + jsx문법
    ReactDOM.render(<ContainerMethod />, root) // 생성한 element를 root인 위치에 그려줌(ReactDOM.render())
  </script>
</html>

ReactJs -State사용 1


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <!-- react import -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <!-- babel import(jsx ->react로 변환) -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- 바벨 사용시 type 입력해주어야 한다. -->
  <script type="text/babel">
    // ** React.createElement()내용을 잘보기

    const root = document.querySelector('#root')
    //state : 우리가 클릭할때마다 1씩 증가하는 데이터를 출력해줄 것이다.
    //ReactJS에서 1씩 증가하는 데이터를(값이 변경되는 데이터를) 어떻게 담아줄것인가? --> state
    // render()로 계속 호출하는 것은 최선의 방법이 아니다.
    let countNum = 0
    function countAfter() {
      countNum++
      render()
    }

    function render() {
      ReactDOM.render(<App />, root) // 생성한 element를 root인 위치에 그려줌(ReactDOM.render())
    }

    const App = () => (
      <div>
        <h3>Total Click : {countNum}</h3>
        <button onClick={countAfter}>Click me</button>
      </div>
    )
    render()
  </script>
</html>

ReactJs -State사용 2


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <!-- react import -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <!-- babel import(jsx ->react로 변환) -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- 바벨 사용시 type 입력해주어야 한다. -->
  <script type="text/babel">
    //state : 우리가 클릭할때마다 1씩 증가하는 데이터를 출력해줄 것이다.
    //ReactJS에서 1씩 증가하는 데이터를(값이 변경되는 데이터를) 어떻게 담아줄것인가? --> state
    // render()로 계속 호출하는 것은 최선의 방법이 아니다.
    // 틀렸다는게 아니다.
    // 하지만 react에서 제공하는 많은 기능들이 있다. 이 기능들을 사용하려면 react의 규칙을 따라야 한다.
    //let counter = 0
    /*
    function countUp() {
      counter++
    }
    */

    // 문법배우기 --> 배열의 요소를 다른이름과 짝지어서 지정해서 그 지정한 이름으로 배열의 요소(값)를 가져올수있다.
    const x = [1, 2, 3]
    const [a, b, c] = x
    console.log(b)

    // react에서는 아래와 같이 함수를 작성할때는 항상 return(엘리먼트)해주어야 하고
    // const variable = () =>() 형식은 return()이 필요없다.
    // const variable = () =>{} 형식은 return()이 필요하다.
    function App() {
      let [counter, setCounter] = React.useState(0)
      // 0,f 나오는데 초기값이 0이고 그다음 뭔가 할수있는 함수를 입력해야한다.
      // 위의 counter변수와 countUp을 해서 계산했던것을 usetState()에서 할수있도록 해놓았다.
      // React.useState()의 매개변수는 2개가 필요하다.
      console.log(counter)

      const onClick = () => {
        setCounter(counter + 1)
      }
      
      return (
        <div>
          <h3>Total Click : {counter}</h3>
          <button onClick={onClick}>Click me</button>
        </div>
      )
    }
    const root = document.querySelector('#root')
    ReactDOM.render(<App />, root) // 생성한 element를 root인 위치에 그려줌(ReactDOM.render())
  </script>
</html>

ReactJs -State사용 3

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <!-- react import -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <!-- babel import(jsx ->react로 변환) -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- 바벨 사용시 type 입력해주어야 한다. -->
  <script type="text/babel">
    function App() {
      // 바닐라JS가 HTML의 큰틀을 가져와서 기능별로 만들었다면
      // , ReactJS는 이 기능을 더 세부적인 기능(component)으로 나눠서 개발한다.
      let [counter, setCounter] = React.useState(0)

      console.log(counter)

      const onClick = () => {
        // React.useState() modifier의 2가지 사용법
        // setCounter(counter + 1)

        // modifier에도 함수를 넣을수 있는데, 첫번째 매개변수가 현재 데이터의 값이다.
        // 이것이 좀 더 안전한 방법이다. react에서 현재 어떤 데이터인지 정확히 알수 있다.
        // 따라서 다음에 나올 state의 값이 지금 정확한 현재 값에 기반하여야 한다.
        setCounter((current) => current + 1)
      }

      return (
        <div>
          <h3>Total Click : {counter}</h3>
          <button onClick={onClick}>Click me</button>
        </div>
      )
    }
    const root = document.querySelector('#root')
    ReactDOM.render(<App />, root) // 생성한 element를 root인 위치에 그려줌(ReactDOM.render())
  </script>
</html>

배운점
componenet, usestate, jsx등등 리엑트를 시작하기 위해서 많은 개념들을 배웠다.

그렇지만 니코샘이 강조하였듯이 왜 이런 개념과 규칙이 나왔는지 곰곰히 생각하니,

ReactJS이전에는 html의 큰틀로 나누어 그에 맞는 기능이나 데이터 전달을 JS가 담당했다. 만약 변경해야될 데이터가 많고 특히 자식엘리먼트가 많은경우에는 전부다 다시 변경해줄수 밖에 없을것이다.

만약 50개 태그중 1개의 테그의 값을 변경해주기 위해서 나머지 49개를 다시 업데이트 해야 하는 경우가 있을것이다.(JS로 제어가 불가능하다는 것이 아니라 그만큼 코드량이 많아질것이다.)

그러나 ReactJS를 사용해보니 html의 큰틀로 나누어 그에 맞는 기능이나 데이터 전달하는 기능을 또 나누어서(이게 component개념이 아닌가 싶다.)
굉장히 세분화 시켜서 데이터를 제어할 수있게 되었다. 동시에 그만큼 새로고침 or rerendering할 경우의수도 엄청 줄어들것 같았다. 진짜 강력한 힘이다.

특히 나중에 서버와 연동하여 DB에서 데이터를 가져올때 필요없는 새로고침(rerendering)이 많다면 그만큼 서버는 부담스럽다. 따라서 서버의 리소스를 줄일수있는 가장 효율적인 방법으로 FE를 구축하는게 아닌가 싶다.

막연하게 FE는 디자인이 중요하다고 생각했는데, 디자인도 중요하지만 얼마나 효율적인 공간을 사용하면서 멋지고 아름다운 디자인을 보여주는게 중요하다고 알게 되었다.

ps.
const x = [1, 2, 3]
const [a, b, c] = x
자바를 공부했었던 나는 이걸보고 3분간 멍했다.
이게...되는구나...

SaGo_MunGcci

이리저리 생각만 많은 사고뭉치입니다.

다음 포스트

2023.09.04(React JS필기 정리)

ReactJS

2023.09.06(분할과 정복)

0개의 댓글