ReactJS로 영화 웹 서비스 만들기(03

Notice

Recent Posts

Link

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Tags more

Archives

관리 메뉴

공부기록용

ReactJS로 영화 웹 서비스 만들기(03_1/state기초) 본문

📚강의록📚/노마드)React

ReactJS로 영화 웹 서비스 만들기(03_1/state기초)

과부하가즈아 2023. 7. 11. 21:32

https://nomadcoders.co/react-for-beginners/lobby

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

왕초보를 위한 React

nomadcoders.co

state 사용전 사전 구조 설명

<!DOCTYPE html>

<html>
  <body>
    <div id="root"></div>
  </body>
  <!-- import -->

  <!-- React -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <!-- ReactDOM  -->
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <!-- babel -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

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

    let counter = 0;

    function countUp() {
      counter = counter + 1;
    }

    const Container = () => (
      <div>
        <h3>Total Clicks: {counter}</h3>
        <button onClick={countUp}>Click me</button>
      </div>
    );

    ReactDOM.render(<Container />, root); // render : React element를 가지고 HTML로 만들어서 배치한다. 사용자에게 보여준다.
  </script>
</html>

> 페이지가 로딩 되면 함수들은 제외 let counter = 0;이 가장 먼저 실행되고, 뒤에 함수들은 함수를 불러와야 기능을 하는데 let counter = 0;뒤로 함수를 불러오는 곳은 없으므로 let counter = 0;다음으로 ReactDOM.render(<Container />, root);이 실행되는 구조이다.

> ReactDOM.render(<Container />, root);실행시 Container함수_컴포넌트가 렌더링됨 -> counter = 0;

> 코드 어디에서도 UI를 새로고침하고 있지 않음

> counterUP해서 바뀌는 부분만 리렌더링되어서 값이 계속 변하길 원한다.

<h3>Total Clicks: {counter}</h3>

> 중괄호 열어주고 변수이름을 담아주기

<!DOCTYPE html>

<html>
  <body>
    <div id="root"></div>
  </body>
  <!-- import -->

  <!-- React -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <!-- ReactDOM  -->
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <!-- babel -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

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

    let counter = 0;

    function countUp() {
      counter = counter + 1;
      render();
    }

    function render(){
      ReactDOM.render(<Container />, root);
    }


    const Container = () => (
      <div>
        <h3>Total Clicks: {counter}</h3>
        <button onClick={countUp}>Click me</button>
      </div>
    );

    render(); 
  </script>
</html>

let counter = 0;

→ Counter함수의 render()실행

→ render()함수 는 Container컴포넌트를 root에 담아준다

ReactDOM.render(<Container />, root)

→ 실행 초 Container 함수 Total click를 가지고 있고 counter과 연결되어 있다.(let counter = 0로 counter의 초기 값은 0이라는 점 기억)

→ onClick={countUp} 라는 eventListener로 button을 onClick하면 countUp함수가 호출 동작하게 된다.(countUp은 counter을 증가시키고 다시 render함수를 호출 -> render()함수 는 Container컴포넌트를 root에 담아준다로 돌아감 -> 이때는 돌아가면 countUp로 증가된 counter이 root에 담겨 화면에 보여지게 되는것이다.)

const Container = () => (
  <div>
    <h3>Total Clicks: {counter}</h3>
    <button onClick={countUp}>Click me</button>
  </div>
);

function countUp() {
  counter = counter + 1;
  render();
}

function render(){
  ReactDOM.render(<Container />, root);
}

데이터가 바뀔때마다, Container를 리렌더링해줌!

state사용

<!DOCTYPE html>

<html>
  <body>
    <div id="root"></div>
  </body>
  <!-- import -->

  <!-- React -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <!-- ReactDOM  -->
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <!-- babel -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

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

    function App() {

      // 함수선언아래 return문 전에
      const data = React.useState()
      console.log(data);

      return (
        <div>
          <h3>Total Clicks: 0</h3>
          <button >Click me</button>
        </div>
      );
    }
    ReactDOM.render(<App />, root);
  </script>
</html>

// 함수선언아래 return문 전에
const data = React.useState()
console.log(data);

undefined와 함수를 지닌 배열하나를 받는다. undefined의 경우 data를 의미하여, 함수의 경우 그 data를 바꿀때 사용하는 함수이다.

만약 React.useState(0)으로 초기값을 0으로 준다면

data라고 말한 undefined가 0으로 바뀐걸 알 수 있다. 이 두 요소가 만나서 만들었던 함수의 역할을 대신 할 수 있게 되는 것이다. 이 배열의 요소를 꺼내서 이름을 부여해야한다.

배열의 요소를 꺼내서 이름을 부여하기
const food = ["tomato", "potato"]

const a = food[0]
const b = food[1]

console.log(a) // tomato
console.log(b) // potato
> 이렇게 하나하나 꺼내서 이름을 각각 부여하지 않고
const food = ["tomato", "potato"]
const [myFavFood, mySecondFavFood] = food;

console.log(myFavFood); // tomato
console.log(mySecondFavFood); // potato
> 이름을 바로 정해서 꺼내어 오는 방법이 있다.

const data = React.useState(0)
console.log(data)

// data = [0, f]

▼

const [counter, modifier] = React.useState(0)
console.log(counter);
console.log(modtfier);

// 0
// f

> 여기서 counter은 초기 값(data), modifier은 값(data)을 바꿔주기 위한 함수라는 것을 기억

function App() {

      let [counter, modifier] = React.useState(0)
      // 잠시 let으로 바꿨음

      const onClick = () => {
        counter = counter + 1;
        console.log(counter);
        // 1 -> 2 -> 3...
      }

      return (
        <div>
          <h3>Total Clicks: 0</h3>
          <button onClick={onClick}>Click me</button>
        </div>
      );
    }
    ReactDOM.render(<App />, root);

counter의 값은 바뀌고 있지만 리렌더링 즉, 화면에는 반영되지 않고 있다. 그래서 counter의 업데이트를 위해서 modifier을 만들어 줄 것이다.(다시한번 말하지만 modifier은 data의 값을 변경해주기 위한 함수라는 점!)

function App() {

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

  const onClick = () => {
    modifier(123456);
    // 인자를 하나 받고, 어떤 값을 부여하던 함수는 그 값으로 업데이트를 하고 리렌더링을 일으킴
  };

  return (
    <div>
      <h3>Total Clicks: {counter}</h3>
      <button onClick={onClick}>Click me</button>
    </div>
  );
}
ReactDOM.render(<App />, root);

modifier()로 받은 수가 그대로 나온걸 확인할 수 있다.

> modifier함수를 이용해서 state을 바꾸면, 컴포넌트가 재생성되고, 코드가 다시 한번 실행된다. return역시 한번 더 실행되지만, 이번에는 새로운 값을 가지고 실행된다. 즉, counter을 1로 셋팅하면 리렌더링이 일어난다. 또 함수를 실행해서 state를 1->2로 바꾸면 컴포넌트가 재생성되고 코드가 다시 실행되고, return문 역시 또 실행되는데 새로운 값인 2를 가지고 실행된다. 이 과정이 클릭할 때마다 반복된다

그리고 보통 방식으로 데이터에는 원하는 이름(counter)을 붙이고 함수에는 set뒤에 이름을 붙여서 사용한다.

-> [counter, setCounter]

-> 원하는 식(counter의 1씩 증가)을 넣어준다. setCounter(counter +1);

-> 즉, counter이라고 설정한 현재 state를 이용해서 다음 state를 위한 계산을 해주고 있다.

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

const onClick = () => {
  setCounter(counter +1);
};

<!DOCTYPE html>

<html>
  <body>
    <div id="root"></div>
  </body>
  <!-- import -->

  <!-- React -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <!-- ReactDOM  -->
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <!-- babel -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  <script type="text/babel">
    const root = 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>
      );
    }
    ReactDOM.render(<App />, root);
  </script>
</html>

> 오롯이 바뀌는 즉, counter이 증가되어 반영되는 부분만 업데이트해준다.

React는 업데이트 사이사이 정확히 어떤 것들이 업데이트 되는지를 파악해서 HTML에서 그 업데이트되는 부분만 고쳐준다.

1. 직접적으로 값(state)을 전달해서 값(state)을 바꿔주는 방법_어디선가 변경이 될 수도 있는 위험이 있다.

setCounter(counter +1);

2. 함수로 전달해서 값(state)을 바꿔주는 방법

함수를 넣어주고 첫번째 인자_현재의 값 / return값은 새로운 state로 변경해주기 위한 값

setCounter(function (counter) {
  return counter + 1;
});

'📚강의록📚 > 노마드)React' 카테고리의 다른 글

ReactJS로 영화 웹 서비스 만들기(04_2/props활용, React.memo) (0)	2023.07.13
ReactJS로 영화 웹 서비스 만들기(04_1/props이해하기, props추출) (0)	2023.07.13
ReactJS로 영화 웹 서비스 만들기(03_3/state활용) (0)	2023.07.12
ReactJS로 영화 웹 서비스 만들기(03_2/state활용) (0)	2023.07.12
ReactJS로 영화 웹 서비스 만들기(~02/첫 코드 이해하기) (0)	2023.07.11

'📚강의록📚/노마드)React' Related Articles

Comments

공부기록용

ReactJS로 영화 웹 서비스 만들기(03_1/state기초) 본문

ReactJS로 영화 웹 서비스 만들기(03_1/state기초)

'📚강의록📚 > 노마드)React' 카테고리의 다른 글

티스토리툴바