리엑트19 07 React 메모장 만들기 2024. 8. 16. 06 React 환경 설정 Node.jsNode.js는 브라우저 밖에서도(서버를 구축하는 등의) Javascript를 실행할 수 있게 해주는 런타임 환경 특징- 오픈 소스 Javascript 엔진인 크롬 V8을 기반으로 동작- Single-Thread의 non-blocking I/O 이벤트 기반 비동기 방식 NPM(Node Package Manager)- Javascript를 위한 패키지 관리자- 공개된 Javascript 라이브러리들을 쉽게 설치해 사용할 수 있음- Node.js는 NPM을 포함하고 있음. (설치시 같이 설치됨) create-react-app 프로젝트 생성Create React App (CRA) - React 기반의 프로젝트 개발 환경을 구성해주는 툴CRA를 이용하여 프로젝트 생성 : npx create-r.. 2024. 8. 15. 05 이벤트 헨들링 5-1 이벤트 연결하기 JSX에서 함수 연결하기## 리액트의 컴포넌트는 상태를 가지고 그 상태의 변화에 따라서 컴포넌트가 리렌더링 된다.그 말은 리엑트 컴포넌트의 상태에 변화를 주는 무언가가 있다는 것그 무언가의 대부분이 대부분 이벤트 이다. JSX에서 camelCase 형태의 속성에 함수를 전달 Button 아래 예시 이미지처럼 리액트에서 이벤트를 바인딩을 하게 되면, 해당하는 이벤트가 발생이 됐을 때 해당 함수에 클릭에 대한 이벤트 객체를 넘겨주게 된다. 함수에서는 인자로 받는다. 아래는 리엑트로 이벤트 등록하는 것이 아닌, 자바스크립트로 이벤트 등록하는 스크립트document.body.addEventListener('click', (e) => {console.log(e)}); 자바스크립트에서 전.. 2024. 8. 14. 04 LifeCycle과 Hooks React Hook 설명https://well-made-codestory.tistory.com/44 [ReactJS] React Hook(리액트 훅) 이란?React Hook(리액트 훅) 이란? 개요 리액트에서 중요한 React Hook(리액트 훅)의 개념 정리를 통해 프로젝트에서 효율적으로 사용할 수 있도록 하고, 대표적인 훅들에 대해 알아본다. 목차 React Hook의 등well-made-codestory.tistory.com https://ko.legacy.reactjs.org/docs/hooks-overview.html Hook 개요 – ReactA JavaScript library for building user interfacesko.legacy.reactjs.org Hooks 종류- u.. 2024. 8. 13. 이전 1 2 3 4 5 다음
