단의 개발 블로그

이벤트란?사용자가 웹 브라우저와 상호 작용을 하는 것을 이벤트라고 한다. 마우스 클릭, 마우스 아웃, form 입력 등이 있다. 여러 이벤트에 따라 리액트는 해당 이벤트를 받아서 처리할 수 있다.  이벤트 사용 주의사항이벤트 명은 카멜 표기로 작성 ex) onclick -> onClick이벤트에 실행할 자바스크립트 코드가 아닌 함수 형태로 전달DOM 요소에만 이벤트 설정 가능 ex) div, button, inpu등 , 즉 직접 제작한 컴포넌트에는 사용이 불가능 이벤트 종류리액트에서 지원하는 이벤트 종류이다. 이외에도 다양한 이벤트가 있으므로 공식 문서를 참고해서 각자 필요한 이벤트를 사용하면 된다.ClipboardCompositionKeyboardFocusFormMouseSelectionTouchUIW..

컴포넌트리액트는 여러 컴포넌트로 구성하여 사용한다. 컴포넌트는 속성값 props와 상태 값 state를 사용한다. 원래는 클래스형 컴포넌트와 함수형 컴포넌트가 존재해서 사용되어 왔는데 요새는 함수형 컴포넌트가 주로 사용된다. 클래스 형 컴포넌트의 경우 state 기능 및 라이프 사이클 기능을 사용하고, 임의 메소드를 정의할 수 있다. 함수형 컴포넌트는 선언하기 편하고, 메모리 측면에서 유리하다. 또한 클래스 형 컴포넌트가 가진 장점들을 훅을 사용해서 구현이 가능하기 때문에 요즘 대부분의 애플리케이션에서는 함수형 컴포넌트를 사용하여 많이 작업한다. 사용하기src/components/MyConponent.js 생성const MyComponent = () => { return 컴포넌트 테스트}export..

각 운영체제에 맞게 node js를 설치한다.https://nodejs.org/en/download/package-manager node js란 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 실행할 수 있게 해주는 런타임이다.리액트로 프로젝트를 개발하는 데 필요한 주요 도구들이 Node.js를 통해서 사용되기 때문에 설치하여 사용한다.개발도구에는 ECMAScript를 호환 시켜주는 바벨, 모듈화 된 코드를 한 파일로 합치는 것을 번들링, 코드를 수정할 때마다 웹 브라우저를 갱신 시켜주는 리로딩 기능을 하는 웹팩이 묶여있다. nodejs를 설치하면 패키지 매니저 도구인 npm도 같이 설치되는데 이를 통해 다른 개발자가 만든 패키지를 설치하여 사용할 수 있다. 프로젝트 생성터미널에 아래 명령어를 사..