[01.15] todolist 만들어보기😲

💥 클래스형 컴포넌트

 - 리액트 초기에 사용했던 방식

 - 클래스형 컴포넌트를 만들면 컴포넌트 라는 클래스를 상속해야하기 때문에 import 해줘야하고 extends로 상속해줘야함

 

 - ClassCom.tsx

 - App.tsx

 - 결과

💥 함수형 컴포넌트

 - 리액트가 권장하는 방식

 - 클래스형보다 덜 복잡하고 코드가 간결해서 편함

 - export default 써주는 건 동일

 - import 꼭 해줘야함

 - FuncCom.tsx

 - App.tsx

* 화살표 함수로도 표현가능

function 키워드를 없애고 변수로 만들고 => 붙여주면 된다.

 - 결과

💥 state 사용

 - 변수 대신 state 를 사용해서 데이터를 저장함

 - state = 상태(= 데이터의 상태)

 - 데이터를 동적으로 감시해서 변경이 되면 즉시에 반영하겠다 라는 의미로 사용함

 - 일반 변수를 사용하게 되면 상태관리가 안되기 때문에 상태관리를 하는 state를 사용함

💥 todolist 실습해보기

이렇게 input에 적은 todolist를 [추가]버튼으로 눌러서 추가할 수도 있고, - 버튼을 눌러 지울 수도 있다.

오늘 할 일에서 한 일들은 체크박스를 눌러 취소선이 생기게 만들 수도 있다.

const Clock : React.FC = () => {
    const [time, setTime] = useState(new Date())

    setInterval(()=>{
        setTime(new Date())
    }, 1000)

    return (
        <div>
            현재 시간 : {time.toLocaleTimeString()}
        </div>
    )
}

이렇게 setInterVal을 이용해서 현재 시간도 실시간으로 보이게끔 만들었다.