코딩공부

빌드하기 : Build 과정에는 transpiling 과 bundling 과정이 있음. npm run build -> 개발된 프로젝트 빌드하기 npx serve build -> 빌드한 것 로컬에서 실행하기 Babel이라는 사이트에서 순수 자바스크립트 언어로 바꿔줌. Transpiling 과정임. 번역된 코드는 번들링을 통해 웹 브라우저가 다운받기 좋은 형태인 묶인 형태로 나옴.

인라인(in-line) 리액트에서 인라인 스타일은 문자열이 아닌 객체형으로 사용. Property 이름은 CSS 속성 이름으로, property 값은 CSS 속성값으로 씀. 이 때, property name은 대시 기호 없이 카멜케이스로 써야 한다. import diceImg from './assets/dice.png'; const style = { borderRadius: '50%', width: '120px', height: '120px', }; function Dice() { return ; } export default App; 이미지불러오기 이미지는 import 구문을 통해서 불러오고 불러온 이미지 주소를 src 속성으로 사용. import diceImg from './assets/dice.pn..

State : 리액트에서 화면을 그려내는 데 굉장히 중요한 역할을 함. 상태가 바뀔 때마다 화면을 새롭게 그려내는 방식으로 동작을 하는 것. state 사용법 1. useState 함수 활용하기 import { userState } from 'react'; //... const [num, setNum] = useState(1); //... destructing 문법으로 작성. useState 함수가 초기값을 아규먼트로 받고 그에 따른 실행 결과로 요소 2개를 가진 배열의 형태로 리턴하기 때문. 첫 번째 요소(num)가 state고, 두 번째 요소(setNum)가 state를 바꾸는 setter함수. 보통 첫 번째 변수는 state의 이름을 지어주고, 두 번째 변수는 state이름 앞에 set을 붙인 다음..

Properties(속성) : JSX 문법에서 컴포넌트를 작성할 때 컴포넌트에서도 속성을 지정할 수 있음. 리액트에서 컴포넌트에 지정한 속성을 props라고 함. 컴포넌트에 속성을 지정해주면 각 속성이 하나의 객체로 모여서 컴포넌트를 정의한 함수의 첫번째 파라미터로 전달됨. components에 가면 props에서 볼 수 있음 컴포넌트 함수는 파라미터로 props 객체를 받는다. 그래서 HandIcon 함수의 파라미터로 지금 value를 받고 있음. App.js 에서 value값으로 지정해주는 애들에 따라서 이미지가 바뀌게 됨. 결과: Children : JSX 문법으로 컴포넌트를 작성할 때 컴포넌트를 단일 태그가 아니라 여는 태그와 닫는 태그의 형태로 작성하면, 그 안에 작성된 코드가 바로 childr..

JSX 문법 자바스크립트와 html을 섞어쓸 수 있는 자바스크립트의 확장판. 자바스크립트에서 html을 편리하게 활용할 수 있는 문법. js의 확장문법이다 보니 주의할 점이 있음. 속성명을 모두 외울필요는 없음. i. HTML과 다른 속성명 1. 속성명은 카멜케이스로 작성 JSX 문법에서도 태그에 속성을 지정해줄 수 있다. 단 여러 단어가 조합된 몇몇 속성을 사용할 경우에는 카멜케이스(camel case)로 작성해야한다. ex) onClick, onBlur, onFocus, onMouseDown 단, 예외적으로 HTML에서 비표준 속성을 다룰 때 활용하는 data-* 속성은 카멜케이스가 아니라 기존의 HTML문법을 그대로 작성한다. 2. 자바스크립트 예약어와 같은 속성명은 사용할 수 없다. JSX문법도 ..

* node.js 설치가 먼저! 커맨드 요약 1. 프로젝트 생성 create-react-app npm init react -app or 폴더를 VSCode로 열고 터미널에서 npm init react-app . 2. 개발모드 실행 npm run start 3. 개발모드 종료 ctrl+C 리액트 개발자 도구 크롬 -> React Developer Tools 설치 -> inspect -> components