우당탕탕 감자 바보의 바보 탈출기

[리액트/React] 화면 변경하기(State) 지난 포스트에는 이벤트 리스너에 대해 간단히 알아보았습니다. 버튼 클릭 시 변수의 값을 바꾸는 것만으로는 화면에 보이는 버튼 내용을 변경하지 못했습니다. 리액트에서는 let, var와 같은 일반 변수들이 변경되더라도 일반적으로 컴포넌트를 다시 그리지 않습니다. State 화면을 다시 그리기 위해서는 state라는 특수한 변수를 사용하여야 합니다. 등록된 state 함수가 미리 설정된 함수에 의해 변경될 경우 컴포넌트를 재호출하며 화면을 다시 그립니다. state를 관리하기 위해 아래와 같이 리액트 라이브러리로 부터 useState란 함수를 import 해야합니다. 아래 코드는 React 라이브러리로부터 useState 함수를 import하는 코드입니다. i..

[리액트/React] 이벤트 처리 이번 게시글에서는 리액트에서의 이벤트 처리에 대한 간단히 정리해볼 것입니다. 저는 리액트에서 이벤트 처리는 HTML DOM에 기본적으로 내장된 리스너를 사용한다고 이해했습니다. 버튼 클릭 예제 예를 들어 버튼 클릭 시 로그를 띄우는 기능을 구현할 때, 버튼 태그에 onClick 속성을 추가하여 이 기능을 구현할 수 있습니다. {}}> 버튼 위 코드는 클릭했을 시 동작을 화살표 함수를 이용하여 나타내었습니다. 이 대신 함수를 정의하고 함수의 이름을 지정하여 사용도 가능합니다. const CustomComponent = (props) => { const clickHandler = () => { console.log('클릭됨'); }; return ( 버튼 ); } 버튼을 클..