언젠가는 펼쳐 볼 아카이브

[React JS] 이론 공부 : shortcut 본문

IT/ReactJS

[React JS] 이론 공부 : shortcut

개발자희망생고롸파덕 2023. 10. 13. 16:06
  • JSX - javascript를 확장한 문법
    • JSX의 문법을 적용하기 위해서는 babel을 이용하면 됨
    • Babel 사용 방법 1
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/bable>
... 코드 작성
</script>

 

# JSX를 이용한 ReactJS 코드 작성

<!DOCTYPE html>
<html lang="en">
  <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 src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const root = document.getElementById('root');

    const Title = (
      <h3 id='title' onMousEnter={console.log('mouse Enter')}>
        Hello I am a span
      </h3>
    );

    const Button = (
      <button
        style={{ backgroundColor: 'tomato' }}
        onClick={() => console.log('i am clicked')}
      >
        Click me
      </button>
    );

    const container = React.createElement('div', null, [Title, Button]);
    ReactDOM.render(container, root);
  </script>
</html>

 

  • 컴포넌트의 첫 글자는 반드시 대문자여야 함
    • 왜? 소문자로 작성할 경우, html 태그와 동일한 변수명일 때 React와 JSX는 html 태그라고 보기 때문
    • JSX는 어플리케이션을 여러가지 작은 요소로 나누어 관리할 수 있음
  • useState()
    • 기본적으로는 [undefined, f(함수 = modifier)] 배열이 제공됨
    • 인자값을 넣으면 undefined가 해당 값으로 초기화 됨
    • modifier 함수를 가지고 state를 변경할 때, 컴포넌트가 재생성됨
      • 즉, 새로운 값을 가지고 리랜더링 되는 것
  • state를 바꾸는 방법 2가지
    • 첫번째 방법
    const [counter, setCounter] = React.useState(0);
      const onClick = () => {
        setCounter(999);
      };
    • 두번째 방법
      • 이전 값을 이용해서 현재값을 계산하는 방법 1
      // 프로젝트에서 사용할 때, 이런 방식으로 하는건 좋지 않음
// 왜냐하면 다른 곳에서 counter가 업데이트 될 수 있는 버그가 발생할 수 있기 때문
const [counter, setCounter] = React.useState(0);
      const onClick = () => {
        setCounter(counter + 1);
      };
      • 이전 값을 이용해서 현재값을 계산하는 방법 2
      // 이 방법이 훨씬 더 안전함
// 리액트가 current가 확실히 현재 값이라는 것을 보장하기 때문
const [counter, setCounter] = React.useState(0);
      const onClick = () => {
        setCounter(counter + 1);
      }
  • Props
    • 일종의 방식이라고 생각하면 됨
    • 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법임
      • 컴포넌트란 ? 단지 어떤 JSX를 반환하는 함수라고 생각하면 됨
    // 기본 버전
function Btn(props) { <== 
      return (
        <button
          style={{
            backgroundColor: 'tomato',
            color: 'white',
            border: 0,
            borderRadius: 10,
          }}
        >
          {props.banana}
        </button>
      );
    }

// shortCut 버전
function Btn({ banana }) {
      return (
        <button
          style={{
            backgroundColor: 'tomato',
            color: 'white',
            border: 0,
            borderRadius: 10,
          }}
        >
          {banana}
        </button>
      );
    }

...
function App() {
      return (
        <div>
          <Btn banana='Save Changes' />
          <Btn banana='Continue' />
        </div>
      );
    • props state가 변경되지 않은 컴포넌트는 불필요하게 리랜더링 할 필요가 없음
      • 이걸 방지하고 싶으면 React.memo()를 사용하면 됨
      • React.memo()
        • 고차 컴포넌트(Higher Order Component)임
        • 컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다면, React.memo를 호출하고 결과를 메모이징(Memoizing)하도록 래핑하여 경우에 따라 성능 향상을 누릴 수 있음
          • 즉, React는 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용함
    function Btn({ text, changeValue }) {
      return (
        <button
          onClick={changeValue}
          style={{
            backgroundColor: 'tomato',
            color: 'white',
            border: 0,
            borderRadius: 10,
          }}
        >
          {text}
        </button>
      );
    }
    const MemorizedBtn = React.memo(Btn); <<<<<==== 이렇게!

    function App() {
      const [value, setValue] = React.useState('Save Changes');
      const changeValue = () => setValue('Revert Changes');
      return (
        <div>
          <MemorizedBtn text={value} changeValue={changeValue} />
          <MemorizedBtn text='Continue' />
        </div>
      );
    }
    • props 가 많아질 수 록 나중에 실수할 수 있는 확률이 높아진다
      • Prop types 를 사용해 타입을 미리 선언해줘 실수를 예방할 수 있음
저작자표시 비영리 변경금지

'IT > ReactJS' 카테고리의 다른 글

[ReactJS] React 이론 공부 기초 - 4  (0) 2023.11.21
[ReactJS] React 이론 공부 기초 - 3  (0) 2023.11.20
[ReactJS] React 이론 공부 기초 - 2  (1) 2023.11.16
[ReactJS] ReactJS 이론 공부 기초 - 1  (1) 2023.11.13
[ReactJS] ReactJS 동작 이해를 위한 VanillaJS 와의 간단 비교  (1) 2023.09.21
'IT/ReactJS' Related Articles more