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

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

WEB/React 2023. 1. 8. 10:55

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

WEB/React 2023. 1. 7. 19:35

[리액트/React] 컴포넌트 이번 게시글에서는 리액트에서의 컴포넌트에 대한 기본 개념을 정리해볼 것 입니다. 리액트의 전부는 컴포넌트라고 할 수 있을만큼 컴포넌트는 중요한 부분입니다. 컴포넌트란? 컴포넌트는 화면 구성을 나타내는 자바 스크립트 함수라고 이해했습니다. 컴포넌트 이름 규칙 리액트에서 컴포넌트 이름은 첫 글자와 중간 글자들이 대문자인 파스칼 케이스(pascal case)를 사용합니다. * 이와 반대로 html에 내장된 내장 요소는 소문자로 시작합니다. 컴포넌트의 특징 리액트에서 컴포넌트들은 각각 단 하나의 루트 요소를 가져야만 합니다. 모바일 xml에서 루트 요소는 하나인 것과 비슷한 듯. JSX에서 데이터 동적 사용 태그 내부에서 자바 스크립트 코드를 사용하고 싶을 경우 중괄호 내부에 자바..

WEB/React 2023. 1. 7. 17:38