TIL 10/16

Rami·2024년 10월 16일
TIL

TodayILearn

목록 보기
24/61

2.6 JSX part Two : JSX 기본형태

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://www.unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <!-- <script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script> -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const root = document.getElementById("root");
    function Title() {
      return (
        <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
          Hello I am a title
        </h3>
      );
    }
    const Button = () => (
      <button
        style={{
          backgroundColor: "tomato",
        }}
        onClick={() => console.log("Clicked!")}
      >
        Click me
      </button>
    );
    const Container = () => (
      <div>
        <Title />
        <Button />
      </div>
    );
    ReactDOM.render(<Container />, root);
  </script>
</html>

3.0 Understanding State

기본식

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://www.unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <!-- <script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script> -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const root = document.getElementById("root");
    const Container = () => (
      <div>
        <h3>Total clicks: 0</h3>
        <button>Click me</button>
      </div>
    );
    ReactDOM.render(<Container />, root);
  </script>
</html>

별로인 방법

1) 렌더링이 1번밖에 안됨 -> React의 의미가 X, 변동되는 숫자를 업데이트 해서 보여주고 있지 않다.

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://www.unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <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);
  </script>
</html>

2) countUP에 render함수를 추가함으로써 함수가 실행될때마다 리렌더링된다.
문제점 -> 값을 바꿀때마다 다시 렌더링하는 걸 잊어서는 안된다.
(값이 바뀌는 곳마다 리렌더링 함수를 붙여야한다)

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://www.unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <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>

최적의 방법

useState함수를 이용해 counter 업데이트와, 리렌더링을 한번에 해결!

 const [counter, setCounter] = React.useState(0);
      const countUp = () => {
        setCounter(counter + 1);
        console.log(counter);
      };
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://www.unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <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 countUp = () => {
        setCounter(counter + 1);
        console.log(counter);
      };
      return (
        <div>
          <h3>Total Clicks: {counter}</h3>
          <button onClick={countUp}>Click me!</button>
        </div>
      );
    }
    ReactDOM.render(<App />, root);
  </script>
</html>

3.1 setState part One 💥💥💥💥

useState()를 통해서 몇줄의 코드를 한줄로 만들 수 있다.
useState() 사용 전

let counter = 0;
      function countUp(){
        countert = counter + 1;
      }

useState() 사용 후

const data = React.useState();
console.log(data) // ▶️[undefined, f] -> undefined는 useState의 초기값 () 이고, f는  data의 값을 바꿀 수 있는 함수

만약 초기값이 100이면,
const data = React.useState(100);
console.log(data) // ▶️[100, f] -> 이렇게 초기값에 따라 바뀜

const[초기값, 수정될 값] = useState();

const[초기값, 수정 될 값] = useState(); 의 의미

예시1
예시2

const num = [11, 22, 33]처럼 배열을 정의하고 num[0], num[1], num[2]와 같은 인덱스를 이용해 값을 가져올 수 있습니다. 그러나 구조 분해 할당(destructuring)을 사용하는 이유는 코드의 가독성을 높이고, 특정 값을 변수로 쉽게 추출하기 위해서입니다.

구조 분해 할당이란?

  • 구조 분해 할당은 배열이나 객체의 요소를 개별 변수로 쉽게 추출할 수 있게 해주는 JavaScript의 문법입니다.
  • 예를 들어, [a, b, c] = num의 경우, num 배열의 첫 번째 요소(11)는 a에, 두 번째 요소(22)는 b에, 세 번째 요소(33)는 c에 할당됩니다.

구조 분해 할당의 이유와 장점

  1. 가독성:

    • num[0], num[1], num[2]처럼 인덱스를 사용하면 코드가 길어질 수 있고, 변수의 의미를 파악하기 어렵습니다.
    • 구조 분해 할당을 사용하면, 각 요소가 어떤 의미를 가지는지 변수명을 통해 명확하게 표현할 수 있습니다.
    • 예를 들어, 다음과 같이 쓸 수 있습니다:
      const [width, height] = dimensions; // dimensions 배열에서 첫 번째, 두 번째 값을 각 변수에 담기
      이렇게 하면 width와 height의 의미를 바로 알 수 있습니다.

  2. 코드의 간결성:

    • 여러 개의 변수를 동시에 선언하고 값을 할당할 때 유용합니다.
    • 예를 들어, 다음과 같은 경우 구조 분해 할당이 유리합니다:
      const num = [11, 22, 33];
const [a, b, c] = num;
      이렇게 하면 num 배열에서 a, b, c에 값을 동시에 할당할 수 있어 간결합니다.

  3. 복잡한 구조에서 특정 값을 쉽게 추출:

    • 구조 분해 할당은 특히 중첩된 배열이나 객체에서 특정 값을 쉽게 꺼내오는 데 유용합니다.
    • 예를 들어, 다음과 같이 중첩된 배열이 있을 때:
      const data = [1, [2, 3], 4];
const [one, [two, three]] = data;
// one: 1, two: 2, three: 3
      이처럼 간단하게 특정 위치의 값을 가져올 수 있습니다.

정리

  • 인덱스를 이용해 num[0], num[1]과 같이 직접 접근할 수 있지만, 구조 분해 할당을 사용하면 코드를 더 간결하고 가독성 있게 작성할 수 있습니다.
  • 특히, 코드의 각 부분이 의미하는 바를 더 명확하게 표현하고자 할 때 유용합니다.

따라서, 코드가 짧고 단순할 때는 인덱스를 이용한 접근이 충분할 수 있지만, 여러 값을 다루거나 특정 요소를 명확하게 분리할 필요가 있을 때는 구조 분해 할당이 훨씬 유리합니다!

3.2 setState part Two

let [counter, modifier] = React.useState(0);
modifier 함수는 counter 함수를 업데이트 시키고, 코드를 렌더링한다. (코드 한줄로 2가지의 작업을 완료한다.)

즉,

counter = counter + 1;
ReactDOM.render(<App />, root);

위의 코드를

modifier(counter = counter + 1);

// 또는

modifier(counter + 1);

로 코드를 만들 수 있다.

완성된 코드

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://www.unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <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 countUp = () => {
        setCounter(counter + 1);
        console.log(counter);
      };
      return (
        <div>
          <h3>Total Clicks: {counter}</h3>
          <button onClick={countUp}>Click me!</button>
        </div>
      );
    }
    ReactDOM.render(<App />, root);
  </script>
</html>

3.4 State Functions

setCounter(counter + 1 );
// 이 코드랑 아래 코드는 같다.
setCounter((current) => current + 1);

setCounter(함수)
setCounter( (현재값) 리턴=> 새로운 state );

3.7 State Practice part Two 💥💥💥💥

중요한 코드!
다시한번씩 처음부터 입력해보고 할것!

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://www.unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    function App() {
      const [amount, setAmount] = React.useState(0);
      const [flipped, setFlipped] = React.useState(false);
      function onChange(event) {
        setAmount(event.target.value);
      }
      function reset() {
        setAmount(0);
      }
      function onFlip() {
        reset();
        setFlipped((current) => !current);
      }
      return (
        <div>
          <h1>Super Converter</h1>
          <div>
            <label htmlFor="amount">Minutes</label>
            <input
              value={flipped ? amount * 60 : amount}
              id="amount"
              placeholer="Minutes"
              type="number"
              onChange={onChange}
              // disabled={flipped ? true : false}
              // disabled = {flipped === true}
              disabled={flipped}
            />
          </div>
          <div>
            <label htmlFor="hours">Hours</label>
            <input
              value={flipped ? amount : Math.round(amount / 60)}
              id="hours"
              placeholer="Hours"
              type="number"
              // disabled={flipped ? false : true}
              // disabled = {flipped === false}
              disabled={!flipped}
              onChange={onChange}
            />
          </div>
          <button onClick={reset}>Reset</button>
          <button onClick={onFlip}>Flipped</button>
        </div>
      );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>
profile
Rami
YOLO
이전 포스트

TIL 10/15

다음 포스트

TIL 10/18

0개의 댓글