리액트 튜토리얼 ( 기초 입문 ) - 4

본 게시물은 유튜브 "개발자의 품격" 님의 강의를 토대로 작성 되었습니다

 

 

이번에는 가장 많이 쓰는 예제인 Counter를 작성 해봅시다

 

컴포넌트 폴더에 Counter.js를 만들어 줍니다

리액트에서 동적인 값을 다룰 때, 스테이트를 사용하며

 

useState를 통해 사용합니다

 

새로 만든 Counter.js에 다음과 같이 작성 합니다

0으로 지정된 num과 그 값을 변경 해 줄 set 함수는 setNumber를 만들어 주었습니다

 

이제 적절한 함수를 만들어주고 호출 해주어 다음과 같이 작성 합니다

그리고 App.js에서 Home과 같이 호출 해줍니다

그러면 다음과 같은 결과물을 볼 수 있습니다

저는 index.css에서 App의 div의 a태그에 margin 값을 주어, 글자들끼리 떨어지게 했습니다

 

리액트 재밌네요 호홍