function App() { const handleClick = (event) => { console.log(event); alert('click!'); }; return ( 버튼 ); } export default App; 태그 안에 이벤트 속성 작성 onClick, onSubmit, onChange ... 속성 값으로 자바스크립트 함수를 작성해 이벤트를 연결함 이벤트 발생 시 SyntheticBaseEvent 객체가 리스너에 전달됨 리액트가 한 단계 감싼 이벤트 객체 자바스크립트로 처리하는 이벤트와 동일한 데이터들이 들어있음 참고 https://reactjs.org/docs/handling-events.html Handling Events – React A JavaScript library for ..

box-shadow 만들기 https://cssgenerator.org/box-shadow-css-generator.html Box Shadow CSS Generator A box-shadow CSS Generator tool to quickly generate box-shadow CSS declarations. cssgenerator.org gitignore 파일 만들기 https://www.toptal.com/developers/gitignore gitignore.io Create useful .gitignore files for your project www.toptal.com react beta (함수형 컴포넌트) https://beta.reactjs.org/ React Docs Beta A Ja..

import './App.css'; function App() { const name = 'autumn'; const list = ['딸기', '바나나', '오렌지']; return ( {`Hello! ${name}`} {name} {list.map((item) => ( {item} ))} ); } export default App; 컴포넌트는 함수로 만들 수 있음 함수 이름은 대문자로 시작해야 함 리턴문에 JSX 를 사용해야 함 하나의 태그로 묶어서 반환해야 함 Fragment 인 사용 가능 class 대신 className 을 사용해야 함 자바스크립트 코드 사용 시 중괄호로 묶어 주어야 함

Create React App 리액트 개발에 사용되는 툴 설치와 기본 설정들을 한 번에 할 수 있음 babel, webpack ... 작업 폴더 안에서 명령어 실행 1분정도 소요됨 npm npm init react-app [프로젝트명] npx npx create-react-app [프로젝트명] yarn yarn create react-app [프로젝트명] yarn start 개발용 모드로 프로젝트 실행 yarn build 배포 시 빌드할 때 사용 yarn test 작성한 유닛테스트, 테스트코드 실행 yarn eject 숨겨진 툴/설정 값들을 밖으로 빼냄 다시 되돌릴 수 없기 때문에 정말 필요한 경우에만 사용 프로젝트 구조 .yarn yarn 실행에 필요한 파일들 node_modules npm 을 이용해 ..

Runtime 프로그래밍 언어가 구동되는 환경 JavaScript Runtime Node.js 브라우저 node.js 브라우저 밖에서 JavaScript 를 실행 가능하게 해주는 JavaScript 실행 환경 Server Side Rendering 가능 Command Line 툴 사용 가능 컴퓨터에서 스크립트를 실행 가능 서버를 만들 수 있음 node.js 설치 https://nodejs.org/ko/ Recommend: 안정성을 위한 버전 Latest: 최신 버전 설치 후 확인 node --version node 환경 진입 $node node 환경 나오기 .exit 또는 Ctrl + C 두번 누르기 PEPL (Read-Eval-Print Loop) 사용자가 특정 코드를 입력하면 그 코드를 평가하고 코드..

리액트 UI 를 만들기 위한 JavaScript 라이브러리 UI 를 컴포넌트 단위로 보여주고 이벤트에 반응하도록 만들어짐 리액트 === 컴포넌트들 컴포넌트 다른 컴포넌트들과 독립적인 응집도가 높은 UI 블럭 독립적이어야 함 고립되어 있어야 함 재사용성이 높아야 함 컴포넌트 나누는 기준 재사용성 반복되는 것을 컴포넌트로 만들어서 재사용성을 높임 단일책임 한 컴포넌트 안에서 너무 다양한 로직을 처리하는 경우 재사용될 가능성이 낮더라도 작은 단위로 나눔 리액트 동작 원리 컴포넌트 정의 함수로 정의함 함수의 반환 값은 UI 에 표기할 html 처럼 생긴 JSX 로 만듦 render JSX 문법을 사용해 컴포넌트를 만들 수 있음 상태가 변경될 때 마다 re-render 됨 실제로 변경된 부분만 화면에 업데이트 됨..