React.js란?

리액트(React)란?

자바스크립트의 UI 라이브러리 지금은 Meta가 된 Facebook이 개발한 오픈소스

 

JSX

자바스크립트를 확장한 문법

React요소를 HTML문법처럼 만들수 있게해줌

https://unpkg.com/react@17.0.2/umd/react.production.min.js
https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js

• 자바스크립트 예약어랑 겹치는건 사용못하니 주의
  • class = className, for = htmlFor

 

Babel

JSX코드를 브라우저가 이해할수 있는 형태로 바꿔줌

https://unpkg.com/@babel/standalone/babel.min.js

• 컴포넌트의 첫 글자는 반드시 대문자

 

React.js의 state

const [counter, setCounter] = React.useState(0); //값을 넣지않으면 초기값은 0 이다
//setCounter : counter값 수정 후 리렌더해줌

• '실제로 바뀌는 값'만 판단해서 불필요한 리렌더링을 제외하고 동작한다.
• counter 은 현재의 값 state이다

 

State Functions

const onClick = () => {
    setCounter(counter + 1);
    setCounter((current)=> current + 1); //함수를 사용할 경우 리액트가 current 값이 현재 값이라는걸 보장
}

• 현재 state를 기반으로 계산하고 싶다면 함수를 이용
• 예상치 못한 업데이트가 어디선가 일어났다고 해도 안전

 

Props

function Btn(props)

// props 생략하고 꺼내오기 가능
function Btn({text})

function App() {
    return (
        <div>
            <Btn text="Save Changes" big={true}/>
        </div>
    )
}

• 속성안에 있는 모든값들을 첫번째 인자에 객체로 넘겨줌

 

Memo