리액트 배경

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

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

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

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

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

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

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

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

Virtual DOM

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

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

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

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

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

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

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

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

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

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

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를 사용해서 기본값을 설정할 수 있습니다.

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

Hello.defaultProps = {
  age: '20'
}

컴포넌트 사이에 있는 값을 조회하고 싶을 때 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라고 간주합니다.

isRequired == isRequired = {true}

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