~☆~ 우하하!!~ 개발블로그

이번 포스트는 https://iwoohaha.tistory.com/316 의 연장이다.지난번 포스트에서는 버튼을 클릭하면 단순히 알럿 메시지를 표시하는 정도의 수정이었는데, 이번에는 버튼이 도대체 몇 번이나 클릭을 당했는지를 표시해보려고 한다. 컴포넌트에서 어떤 값을 관리하기 위해서는 상태(state)를 관리해야 하는데, 'react' 로부터 useState 를 import 하는 것으로부터 시작한다.import { useState } from 'react'; node_modules 디렉토리 아래의 react 에서 export 하고 있는 컴포넌트가 무수히 많기 때문에 그 중에서 필요한 useState 만을 가져오기 위한 방법으로 { } 괄호 사이에 useState 를 사용하고 있는 것이다. 이렇게 상태관리..

https://iwoohaha.tistory.com/314 에서 실습해 본 수정의 연장선 차원에서 버튼에 클릭 이벤트를 추가하는 방법에 대해서 알아보자. 우선 클릭 이벤트 핸들러 함수를 만들어보자. function handleClick() { alert('You clicked me!'); } handleClick 이라는 이름의 함수인데, alert 함수를 사용해서 'You clicked me!' 메시지창이 표시되게 했다. 이 함수를 작성해야 하는 위치는 MyButton 컴포넌트(함수형 컴포넌트) 내부이다. MyButton 컴포넌트의 동작과 관계가 있기 때문이다.function MyButton() { function handleClick() { alert('You ..

https://iwoohaha.tistory.com/313 에서 React 프로젝트 구성 파일을 대략적으로 살펴봤는데, 이번 포스트에서는 과감하게 App.js 의 내용을 수정해 봄으로써 React 프로젝트 개발의 첫 발을 내딛어보려고 한다. React 프로젝트 분석https://iwoohaha.tistory.com/312 에서 생성해본 React 프로젝트를 분석해보자.IntelliJ IDEA 나 Visual Studio Code 를 이용해서 myreactapp 프로젝트를 연다.IntelliJ IDEA 도구를 사용해서 프로젝트를 열고 나면 프로젝iwoohaha.tistory.com 참고 : https://ko.react.dev/learn 빠르게 시작하기 – ReactThe library for web an..

https://iwoohaha.tistory.com/312 에서 생성해본 React 프로젝트를 분석해보자.IntelliJ IDEA 나 Visual Studio Code 를 이용해서 myreactapp 프로젝트를 연다.IntelliJ IDEA 도구를 사용해서 프로젝트를 열고 나면 프로젝트 디렉토리 하위에 .idea 이름의 디렉토리가 생성되는데(프로젝트를 오픈하고 나서 생기므로 위 스크린샷에는 잡히지 않았다) 오직 IntelliJ IDEA 를 위한 디렉토리이므로 신경쓰지 않아도 된다. public 디렉토리와 src 디렉토리를 펼쳐서 하위에 어떤 파일들이 구성되어 있는지를 볼 수 있게 해봤다.우선 public 디렉토리를 구성하고 있는 파일들을 살펴보자. public 디렉토리에는 정적 파일들이 포함되어 있는데,..