React JS?

Heewon👩🏻‍💻·2024년 4월 29일

UI의 상호작용을 좋게한다는데, 그래서 React JS가 뭐임 ?

코드 생김새가 어케 달라지는지 대강 눈으로 확인하기!!

기존 JS코드를 사용한 조회수 확인법

<html>
  <body>
    <span id="counter">Total clicked : 0</span>
    <button id="btn">click me!</button>
  </body>
  <script>
    let counter = 0;
    function clickButton() {
      counter += 1;
      span.innerText = `Total clicked : ${counter}`;
    }
    const span = document.querySelector("#counter");

    const button = document.querySelector("#btn");
    button.addEventListener("click", clickButton);
  </script>
</html>

React JS를 사용한 조회수 확인법 1 (without useState)

<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <script type="text/babel">
    const root = ReactDOM.createRoot(document.getElementById("root"));
    let counter = 0;

    function counterUp() {
      counter += 1;
      render();
    }
    function render() {
      root.render(<Container />);
    }
    function Container() {
      return (
        <div>
          <h3>Total clicks : {counter}</h3>
          <button onClick={counterUp}>click me!</button>
        </div>
      );
    }
    render();
    //페이지가 실행될때 바로 로드 되는것은 root.render(<Container />); 코드 한 줄이다.
    //즉 버튼을 클릭했을때 counter가 올라가는걸 UI에서 보게하려면 UI를 업데이트하는 코드를 작성해야한다.
    //그러기 위해선 counterUp될때마다 페이지를 업데이트 하는 render함수롤 호출해야한다.
  </script>
</html>

React JS를 사용한 조회수 확인법 2 (with useState)

<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <script type="text/babel">
    const root = ReactDOM.createRoot(document.getElementById("root"));

    function App() {
      const [counter, setCounter] = React.useState(0);
      const onClick = () => {
        setCounter(counter + 1);
      };
      return (
        <div>
          <h3>Total clicks : {counter}</h3>
          <button onClick={onClick}>click me!</button>
        </div>
      );
    }
    root.render(<App />);
  </script>
</html>

JS랑 React JS는 코드만 다른건가요?

리액트가 아닌 경우, 일반 자바스크립트를 쓴 브라우저는 노드정보가 바뀔때마다 노드트리를 5단계에 걸쳐서 처음부터 생성한다. 근데 리액트는 가상돔을 써서 우리 시야에 보이는 부분만 수정해서 보여주고 모든 업뎃이 끝나면 일괄로 합쳐서 실제 돔에 던저준다. 면접에 자주등장한다고함. 브라우저 작동원리와 연관있다. 프엔은 이 렌더트리 단계를 얼마나 최적화하는가가 관건이다.

Vanilla JavaScript와 ReactJS는 노드 변경 처리 과정이 좀 많이 다름

Vanilla JavaScript
Vanilla JavaScript에서는 DOM 변경을 직접 처리한다. 즉, 필요한 DOM 요소를 직접 선택하고, 요소의 속성을 변경하거나 새로운 요소를 추가하거나 기존 요소를 제거하는 등의 작업을 직접 수행한다. DOM 변경이 발생하면, 브라우저는 변경된 DOM 트리를 다시 계산하고, 렌더 트리를 다시 생성한 후 화면에 그린다. 이 과정은 비용이 많이 드는 연산으로, 자주 발생하게 되면 성능을 저하시킬 수 있다.

ReactJS
ReactJS는 DOM 변경을 처리하기 위해 가상 DOM(Virtual DOM)이라는 개념을 도입한다. ReactJS에서는 먼저 메모리에 가상 DOM 트리를 생성한다. 이 트리는 실제 DOM 트리의 사본으로서, 실제 DOM 트리와 별도로 존재한다. ReactJS는 상태 변경이 발생할 때마다 새로운 가상 DOM 트리를 생성하고, 이전의 가상 DOM 트리와 비교하여 변경된 부분을 파악한다. 이렇게 파악된 변경 사항만 실제 DOM에 반영하는 방식을 사용한다. 이 과정을 '재조정(Reconciliation)' 또는 'Diffing'이라고 부른다.
가상 DOM을 사용함으로써, 변경이 필요한 최소한의 요소만 실제 DOM에 반영되기 때문에 불필요한 연산을 줄이고 성능을 향상시킬 수 있다.

결론: ReactJS는 복잡한 UI 업데이트를 효과적으로 처리할 수 있으며, 이를 통해 웹의 응답성을 향상시키고 사용자 경험을 개선할 수 있다.

1. React JS를 사용하기전에 필요한 셋팅

 * React JS의 엔진 라이브러리!
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  * React JS로 짠 코드를 html에 넣어줄 라이브러리!
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

2. React JS Elements!

React JS에선 html코드를 JS를 이용해서 생성할것임. (근데 이건 걍 JS로도 가능했긴함)

getElementById는 React 사용 개발자들이 아무도 안쓰는 방법. 어려운 방법ㅋ 그럼에도 이해가 필요한이유는, JS는 html을 먼저 만들고 JS코드를 작성하는데, React는 거꾸로한다는걸 보여주기 위함. JS코드를 먼저 짜고, html을 생성하는 방식임. 업데이트가 필요한 html을 React JS로 업데이트 할 수 있음을 말해준다.

<!DOCTYPE html>
<html>
  <body></body>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script>
  	const root = document.getElementById("root");
  	const span = React.createElement("span", { id: "span-tag", onClick: ()=> conosle.log("I am span~?" )}, "heelllloo I am a span!!");
    * ("span") < 은 html에서 사용하는 요소 이름과 무조건 같게 만들어야한다.
    * span을 만든다음 ("span", {property를 넣을 수 있음 className이라던지 id라던지!}, span contents를 넣을 수 있음)
    * property에 addEventListener도 넣어 줄 수 있다. wow!!!!
    const btn = React.createElement(
      "button",
      { onClick: () => console.log("I am clicked"),
      	style: { backgroundColor: "tomato" }}, //스타일도 바꿔줄 수 있다.
      "click me"
    );
    
    const container = React.createElement("div", null, [span, btn]);
    * span -> btn순서대로 container이란 변수안에 넣어주고 DOM에 출력할 수 있다.
    ReactDOM.render(constainer, root);
    //ReactDOM.render(어떤요소를, 어디넣을껀데)
  </script>
</html>

3. React에 JSX가 있는데...

JSX는 JS를 확장한 문법이다. 생긴게 html이랑 흡사해서, getElementById, createElement등을 사용하지 않아도 된다.

4. JSX를 사용하려면 브라우저가 JSX코드를 읽을 수 있게해야한다.

script tag

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

React 코드

const span = React.createElement(
		"span", 
		{ id: "span-tag", 
		onClick: ()=> conosle.log("I am span~?") 
		}, 
		"heelllloo I am a span!!"
		);
 const btn = React.createElement(
       "button",
       { onClick: () => console.log("I am clicked"),
      	style: { backgroundColor: "tomato" }}, //스타일도 바꿔줄 수 있다.
       "click me"
        );
 const container = React.createElement("div", null, [span, btn]);

JSX를 사용한 React 코드

const Words = ()=> (<span id="span-tag" onClick={()=> conosle.log("I am span~?")} >Heellllloo I am a span!!</span>);
const Button = ()=> (<button style = {{ backgroundColor: "tomato" }} onClick = {() => console.log("I am clicked")} >Click me</button>);
const Container =  ()=>
(<div>
	<Title />
    <Button />
</div>);
ReactDOM.render(<Container />, root);

변수를 대문자로 적어주는게 중요한데, 이유는 JSX에서 코드를 읽어나갈때 html요소로 읽어낼 수 있기때문이다. 예를들어 변수명을 button이라고 지어주면, html요소<button>을 먼저 읽어낸다.
Arrow function을 하기위한 이유는 Container에 render하기위함.
컴포넌즈안에 컴포넌즈를 JSX을 이용해 넣는방법을 알아봄!

5. React state에 대해 알아보자.

const data = React.useState();
console.log(data)를하게 되면 화면에 배열 하나가 나오고, 생김새는 [undefined, f] 이렇게생김.
여기서 undefined 에는 데이터가 들어가고, f엔 함수가 들어가게 되는것.
즉, useState()는 아래의 코드랑 같은 기능을 한다.

let counter = 0;
function counterUp() {
counter += 1;
render();
}

counter변수는 undefined에 해당하고,
counterUp()함수는 f에 해당한다.


function App() {
      const data = React.useState(0);
      console.log(data);
      return (
        <div>
          <h3>Total clicks : 0</h3>
          <button onClick={counterUp}>click me!</button>
        </div>
      );
    }

data는 []배열에 담겨서 나온다고 했는데, 데이터값을 UI에 출력하려면 data[0]이렇게 정해도 되지만, 변수이름을 정해줄 수 있다.

const food = ["tomato", "potato"];
const tomato = food[0];
const potato = food[1];

이렇게 하는방법이 있고,

const [to, po] = food;
로 간단하게 처리하는 방법이 있다.
즉, const [to, po] = ["tomato", "potato"]; 한 줄로 정의할 수 있다.

그러면!!!!!

const data = React.useState(0);

위 코드를 아래와 같이 바꿀 수 있다.

const [counter, setCounter] = React.useState(0);

그리고 렌더한 기능을 탑제한 setCounter가 대박인게 render함수를 다시부르지 않아도 알아서 호출해줘서 편리함. 왜React 하는지 알꺼같음. [React JS를 사용한 조회수 확인법 2 (with useState)]여기 코드 100번봐 아니 200번봐..! 끄읏..!

Heewon👩🏻‍💻

Interested in coding, meat lover, in love with dogs , enjoying everything happens in my life.