React JS

sjy·2022년 6월 26일
0

리액트공부

목록 보기
4/9

React

사용자 인터페이스를 만들기 위한 JS 라이브러리(기능 모음집)
사이트를 만드려면 HTML, CSS, JS가 필요한데 사이트 규모가 커질수록 관리가 힘들어진다. 이 관리를 좀 더 편하게 할 수 있도록 하기 위해 나온 것이 react이다.
페이지마다 각각 HTML, CSS를 만드는 것이 아니라 기본 뼈대를 만들어놓고 사용자가 정보를 요청 할 때 해당하는 내용을 보여주는 방식(SPA)을 이용

react는 라이브러리인데 angular와 vue는 프레임워크라고 하는 이유?
라이브러리는 필요한 부분만 개발자가 원하는대로 가져다 쓸 수 있다.
프레임워크는 흐름의 제어 권한을 개발자가 아닌 프레임워크가 가진다.

장점

빠른 업데이트, 랜더링 속도

Virtual DOM

가상의 DOM(document object model)
웹페이지와 실제 DOM 사이에서 매개체 역할을 한다.

virtual DOM은 DOM 전체를 리랜더하지않고 수정이 필요한 부분만 찾아서(compute diff) 수정하고 리랜더하도록 한다.

Component-Based

블럭 조각을 모아서 작품을 만들듯이 작은 단위의 컴포넌트를 이용해 페이지를 구성. 재사용성(Reusability)이 높다.
재사용성이 높게 만들고 싶다면 그 소프트웨어나 모듈이 다른곳에서도 쉽게 쓰일수 있도록 해야한다.(의존성 down, 호환성 up)

단점

학습량, 지속적인 변동, 상태관리 복잡도

간단한 예제 실습

HTML


<html lang="ko">
<head>
    <title>사이트</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>작성한 내용</h1>
    <div id="root"></div>

    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

    <script src="MyButton.js"></script>
</body>
</html>

CSS

h1{
color: blue;
font-style: italic;
}

Button JS

function MyButton(props){
    const [isClicked, setIsClicked] = React.useState(false);

    return React.createElement(
        'button',
        {onClick : ()=>setIsClicked(true)},
        isClicked ? 'Clicked!' : 'Click here!'
    )
}

const domContainer = document.querySelector('#root');
ReactDOM.render(React.createElement(MyButton), domContainer);
profile
수학과 코딩

0개의 댓글