React 기본개념

2023. 3. 8. 10:47·TECH
목차
  1. 개념
  2. 왜 필요할까 ?
  3. JSX 작성시 규칙
  4. 비구조화 할당
  5. defaultProps
  6. props.children
  7. 삼항연산자
  8. &&
  9. props name도 true

리액트 배경

자바스크립트로 UI를 제어하는 경우

간단하게 counter를 만든다고 가정했을 때

제어 원하는 dom select -> 이벤트 핸들러 -> dom 업데이트 라는 과정을 거칩니다.

규모가 커지는경우 많은 DOM을 직접 건드리면서 작업을하면 코드가 난잡해집니다.

리액트는 상태가 변경되었을 때 기존 dom을 날리고 새로운 dom을 보여준다는 개념에서 시작되었습니다.

매번 상태가 변경될 때마다 새롭게 만들게 되면 속도가 엄청나게 느려집니다.

리액트는 상태가 변경되면 Virtual DOM을 사용해서 업데이트가 필요한 곳의 UI를 렌더링 합니다.

그리고 실제 DOM과 비교하여 다른부분에 대해서만 실제 DOM에 패치시켜줍니다.

 

Virtual DOM

개념

메모리 상에 가상으로 존재하는 dom

왜 필요할까 ?

출처 : https://web.dev/howbrowserswork/

 

DOM이 변경이 되는경우 다시 renderTree가 그려지고 layout을 만들고 painting의 과정이 반복되는 것입니다.

SPA는 DOM조작이 많이 일어나게되서 브라우저가 많은 연산이 필요하게 됩니다.

변화가 생긴다면 Virtual DOM에 먼저 적용시키고 최종결과를 실제 DOM에 전달합니다.

브라우저 내에서 발생하는 연산의 양을 줄이면서 성능이 개선됩니다.

 

JSX

JSX는 React 엘리먼트를 생성합니다. 형태가 HTML과 비슷합니다.

리액트 컴포넌트 파일에서 JSX로 작성하면 babel이 JSX를 자바스크립트로 변환해줍니다.

JSX 작성시 규칙

  1. 꼭 닫혀야 하는 태그
    태그와 태그 사이에 내용이 들어가지 않을 때는 self closing태그를 사용합니다.
  2. 태그가 두개이상일 경우 하나의 태그로 감싸져 있어야한다.
    태그를 사용하기 애매한 경우는 리액트 fragment를 사용한다.
    // fragment return ( <> <Hello /> <Bye /> </> )
    Fragment를 사용하면 실제 dom에는 보이지 않는다.
  3. jsx안에 자바스크립트 값 사용할 경우 중괄호를 사용한다.
    return ( <div> <Hello /> <div>{counter}</div> </div> )
  4. 스타일 속성 camelcase
    background-color => backgroundColor font-size => fontSize
  5. class가 아니라 className
  6. {/* 주석 */} 태그 안에서는 // 가능

컴포넌트 네이밍 첫글자는 항상대문자여야 react, jsx 가 해석한다.

<button></button> //html 태그 버튼
<Button /> //jsx 컴포넌트


props

props는 properties의 줄임말. 어떤값을 컴포넌트에 전달해줘야할 때 사용

상위컴포넌트에서 원하는 이름으로 값을 넘겨주면
해당컴포넌트에서 값을 props 객체로 받아서 사용할 수있다.

// App.js
function App() {
  return (
      <Hello name="react" />
    )
}
//Hello.js
function Hello(props) {
  return (
      return <div>안녕하세요 {props.name}</div>
  )
}

export default Hello;

비구조화 할당

비구조화할당을 사용하면 더 간단하게 코드를 작성할 수 있습니다.

function Hello({name, age}) {
  return <div>안녕하세요 {name} {age}</div>
}

defaultProps

defaultProps를 사용해서 기본값을 설정할 수 있습니다.

function Hello({name, age}) {
  return <div>안녕하세요 {name} {age}</div>
}

Hello.defaultProps = {
  age: '20'
}

props.children

컴포넌트 사이에 있는 값을 조회하고 싶을 때 props.children을 사용할 수있습니다.

// wrapper.js

function Wrapper({children}) {
  return <div>{children}</div>
}
// App.js
import Wrapper from './Wrapper';

function App() {
  return(
      <Wrapper>
        <Hello />
      	<Hello />
      </Wrapper>
  )
}


조건부 렌더링

조건에 따라서 다른결과물을 렌더링하는 것을 말합니다.

삼항연산자

function Hello({isRequired}) {
  return (
      {isRequired ? <div>필수</div> : null}
  )
}

&&

보통 삼항연산자는 조건에 따라 보여주는 내용이 다를 때 사용하는데
위 코드처럼 true면 노출하고 false면 비노출 처리하는 로직은
&& 연산자를 사용하는게 간편합니다.

&& 연산자를 사용하면 true인경우만 '필수'가 노출되고
false인 경우는 비노출 됩니다.

function Hello({isRequired}) {
  return (
      {isRequired && <div>필수</div>}
  )
}

props name도 true

컴포넌트 props 값은 생략한체 name만 내려준다면 true라고 간주합니다.

isRequired == isRequired = {true}

function App() {
  return (
    <Hello isRequired />
  )
}

 

'TECH' 카테고리의 다른 글

NEXTJS 시작하기  (0) 2023.03.08
React Hooks  (0) 2023.03.08
Framer Motion 애니메이션 라이브러리  (0) 2023.03.06
react-router-dom v6  (0) 2023.03.02
Recoil 개념  (0) 2023.03.02
  1. 개념
  2. 왜 필요할까 ?
  3. JSX 작성시 규칙
  4. 비구조화 할당
  5. defaultProps
  6. props.children
  7. 삼항연산자
  8. &&
  9. props name도 true
'TECH' 카테고리의 다른 글
  • NEXTJS 시작하기
  • React Hooks
  • Framer Motion 애니메이션 라이브러리
  • react-router-dom v6
ssund
ssund
  • ssund
    ssund의 기술블로그
    ssund
  • 전체
    오늘
    어제
    • 분류 전체보기 (73)
      • TECH (22)
      • NOTE (40)
      • DAILY (7)
      • javascript (1)
      • 알고리즘 (0)
  • 블로그 메뉴

    • 홈
    • TECH
    • NOTE
    • DAILY
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    react state management
    타입스크립트
    JavaScript
    배열요소순서
    reduxtoolkit
    slidesPerGroup
    styled-components
    reat-head
    함수와 메서드차이
    redux
    TypeScript
    웹브라우저구성
    theme-provider
    Array.sort()
    React
    커머스프로젝트
    global-style
    git배포
    d.ts
    call signatures
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
ssund
React 기본개념

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.