김로원
고양이만도 못한 개발자
김로원
전체 방문자
오늘
어제
  • 분류 전체보기 (60)
    • 프로그래밍 개념 정리 (4)
    • 디버그 기록 and 트러블 슈팅 (5)
    • 프로그래밍 (10)
      • PHP and Laravel (4)
      • JAVA (0)
      • Spring Boot (0)
      • 리액트 react (5)
      • 자바스크립트, 타입스크립트 (0)
      • 데이터베이스 (0)
      • JPA (0)
      • 리눅스 (1)
      • 윈도우 (0)
      • JSP (0)
    • 코딩 테스트 문제 (39)
      • 프로그래머스 (39)
      • 백준 (0)
    • 디바이스 (2)
    • 달리기 (0)
    • 음악 (0)
    • 고양이 로원이 (0)
    • 유요한 정보 (0)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • 노션 이력서
  • 타모임

티스토리

hELLO · Designed By 정상우.
김로원

개발자가 된 집사

리액트 튜토리얼 ( 기초 입문 ) - 4
프로그래밍/리액트 react

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

2022. 11. 17. 16:12
반응형

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

 

 

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

 

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

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

 

useState를 통해 사용합니다

 

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

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

 

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

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

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

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

 

리액트 재밌네요 호홍

728x90
반응형
저작자표시 (새창열림)

'프로그래밍 > 리액트 react' 카테고리의 다른 글

리액트 튜토리얼 ( 기초 입문 ) - 5  (0) 2022.11.22
리액트 튜토리얼 ( 기초 입문 ) - 3  (0) 2022.11.17
리액트 튜토리얼 ( 기초 입문 ) - 2  (0) 2022.11.17
리액트 튜토리얼 ( 기초 입문 ) - 1  (0) 2022.11.17
    '프로그래밍/리액트 react' 카테고리의 다른 글
    • 리액트 튜토리얼 ( 기초 입문 ) - 5
    • 리액트 튜토리얼 ( 기초 입문 ) - 3
    • 리액트 튜토리얼 ( 기초 입문 ) - 2
    • 리액트 튜토리얼 ( 기초 입문 ) - 1
    김로원
    김로원
    개발자가 된 집사

    티스토리툴바