코딩하는 고릴라

1. Component 작성, 사용 3 Step 1) function 작성하기 2) return문에 html 요소 작성 3) or 다른 function의 return문에 포함시키기 2. Component 작성시 유의사항 1) 작명시 일반적으로 영어 대문자 사용 2) return문 안에 html 태그가 평행하게 여러개 들어갈 수 없음 3) function App(){} 외부에서 만들어야 한다. -> function App(){}도 일종의 Component이기 때문 3. Component 사용 시 단점 1) function 안의 변수를 다른 function에서 마음대로 가져다 쓸 수 없다. -> props를 활용해야함 컴포넌트 사용 예 line 7 : Modal 컴포넌트를 출력할지, 말지 결정할 boolea..

1. state 변경 함수 동작 원리 좌측 처럼 let copy = title로 하면 수정이 이루어지지 않는다. state 변경함수는 사용시 [기존 state] === [신규 state]의 검사를 우선적으로 수행 이 값이 true를 반환하게 된다면, state 변경을 하지 않는다. title[0]의 값을 'newTitle'로 바꾼다 하더라도 위 조건에 true를 반환해 변경이 이루어지지 않는데 이는 변수가 배열의 주소를 저장하고 있기 때문이다. copy와 title이 같은 주소를 가리키고 있으므로 항상 같은 값을 가지게 된다. JS의 spread operator(...)을 이용하면 배열의 괄호를 벗겨주는 느낌의 동작을 하게 된다. ...[1,2,3]은 1, 2, 3이 남게 되고, 오른쪽 코드에서의 [....

1. useState 임포트 import { useState } from 'react' 2. state 선언 - title : state를 사용할 때 쓸 변수명 - setTitle : state의 상태를 바꿀 때 사용 - JS의 destructuring 문법을 활용함 - 위 사진처럼 코드가 짜여져 있을 때, destructuring에 의해 a에 1, b에 3이 저장 3. state를 사용하는 이유 - state에 변동사항이 발생하면 html이 자동으로 재 렌더링해 갱신된 값이 화면에 출력 - 자주 변하는 값을 state에 저장하면 용이함 - vue의 ref() 같은 느낌이 있다. 4. state 변경하는 방법 - destructuring으로 꺼낸 state 변경 함수를 사용 5. 버튼 눌렀을 때 함수를 ..

0. JSX? - Java Script Xml - JavaScript의 확장 문법 - 템플릿 언어와 유사하나 JavaScript의 기능을 사용할 수 있다. 1. JSX 기초 문법 1. class 대신 className 사용 2. 변수 사용시 중괄호 { } 사용 3. html 요소에 style 넣기 style = {{ propery: 'value' }}

1. Node js 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org - LTS 버전 권장 2. 프로젝트 생성 1) VSCode에서 프로젝트 생성을 위한 폴더 열기 2) New Terminal -> npx create-react-app 프로젝트명 입력 3) 로딩이 완료되면 프로젝트 생성 완료 3. 프로젝트 구조 1) node_modules - 프로젝트 구동에 필요한 라이브러리 소스 코드들을 모아놓은 폴더 2) public - html, img 등 정적인 파일 보관 3) src - 코드를 작성하는 소스코드 보관