React 천천히 시작하기

Interactive Web을 만들고 싶습니다. 최근에 멋있는 웹사이트를 만들어내는 사람들을 너무 많이 봤습니다. 재밌어 보여서 저도 뭐라도 시작하려고 합니다.

일단 프론트엔드 라이브러리 3대장이라고 불리우는 ‘React’, ‘Angular’, ‘Vue’ 중에 고민하다가, 개인적으로 더 많이 들어봤던 React로 정했습니다. 홈페이지에 가서 ‘tutorial’을 해봤지만 아직 막막합니다.

특히, 어떤식으로 작동하게 되며 React를 이제 어떻게 사용하면 되는지 전혀 감이 안왔습니다. 아무래도 Web 관련 지식이 전반적으로 너무 부족합니다.

일단 아래 블로그를 참고해서 천천히 시작해보려고 합니다.

blog

Why React?

Virtual DOM?

How Browsers Work

link

Project YUMI

또 지인과 프로젝트 시작했습니다. 근데 Frontend를 둘다 너무 몰라서 Backend 구축해놓고 React 공부 중입니다…

React test 용 Github Repository 주소 입니다.

link

lecture

useState

useState를 사용한 react state 관리 예시.

import { useState } from 'react';

function Todo(props) {
    const [ modalIsOpen, setModalIsOpen ] = useState(false);


    function deleteHandler() {
        setModalIsOpen(true);
    }

    function closeModalHandler() {
        setModalIsOpen(false);
    }

    return (
        <div className='card'>
            <h2>{props.text}</h2>
            <div className='actions'>
                <button className='btn' onClick={deleteHandler}>Delete</button>
            </div>
            {/* { modalIsOpen ? <Modal /> : null } */}
            { modalIsOpen && <Modal onCancel={closeModalHandler} onConfirm={closeModalHandler}/> }
            { modalIsOpen && <Backdrop onCancel={closeModalHandler}/> }
        </div>
    );
}