Component 리액트의 문법으로 HTML을 한 단어로 줄여서 쓸 수 있는 방법 // Hello.js import React from 'react'; function Hello() { return Hello World! } export default Hello; // App.css .hello { matgin-top: 20px; padding: 20px; background: #eee; } // App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; 위의 코드는 App.js에서 함수를 길게 적을 게 아니라 src 폴더 안에 Hello.js를 만들어서 exp..

State 컴포넌트 내에서 바뀔 수 있는 값을 의미 props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값, props를 바꾸려면 부모 컴포넌트에서 바꾸어야 함 2021.10.15 - [웹/React] - [React] Component & props 두 가지의 state가 있는데, 함수형 컴포넌트에서 usestate와 클래스형 컴포넌트 state destructuring var [a,b] = [10, 100] array, object에 있던 자료를 변수에 쉽게 담고 싶을 때 사용 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식 destructuring(구조 분해) 사용법 usestate 동적인 값을 상태, 변수 대신 쓰는 데이터 저장공간..

spread operator(펼침 연산자) es6에 추가된 연산자로 마침표 세 개(...)로 사용되며, 크게 두 가지로 쓰이게 된다. 배열에서의 역할 배열 병합 var arr3 = [...arr1, ...arr2] 와 같이 사용도 가능하며, 다양한 형태로 간단히 사용 가능 배열 복사 shallow copy(얕은 복사) 로 되어 있으나, 깊은 복사는 1레벨 까지 허용 위와 같이 2레벨은 깊은 복사가 되지 않기에 '얕은 복사'라고 나와있다 함수에서의 역할 함수의 매개변수를 spread operator로 작성하는 형태를 Rest parameter printf 와 같은 가변인자 받는 형식으로 이해하면 편하다 위와 같은 코드로 사용이 가능 다른 역할로는 나머지의 개념으로 배열 안에서 나머지를 부른다 생각하면 된다..

className 태그에 class 주고 싶으면 데이터 바인딩 서버에서 가져온 데이터 특정 구역에서 보여줘야 하는 데, 그러한 과정을 데이터 바인딩이라 칭한다 위 코드에서보면 posts 변수를 42seoul로 되어있지만, 데이터베이스에서 가져오면 된다. 그렇게 가져온 값을 특별한 과정을 거치지 않고 중괄호 안에 변수명을 입력 { posts } 꼭! 변수명 뿐만이 아니라 함수도 가능, 또한 src, href, id 등의 속성에도 사용 가능 style 속성 중괄호 안에 object 자료형으로 만든 스타일을 넣으면 된다. font-size 같은 경우에는 camelCase 로 변경 해서 fontSize와 같이 써야 한다. 위에 나왔던 것과 같이 style 속성을 변수에 저장을 하여 가져올 수 있다.

배우기 전에 앞서 중요한 건 개발환경을 만드는 것이다. 우선적으로 VSCode 와 Node.js 최신 버전으로 설치 create-react-app (리액트 프로젝트에 필요한 패키지들을 묶어 리액트 앱을 생성해주는 도구)을 설치하기 위해서. NPM(Node Package Manager)을 통해 설치하는데 이것이 nodejs에 포함 npm : 패키지(모듈)의 설치 및 관리를 쉽게 하기 위해 도와주는 매니저(관리 도구) 작업을 하고자 하는 폴더를 대상으로 VSCode 실행 후, 터미널에서 npx create-react-app 프로젝트명 적으면 리액트 앱이 생성 npx : npm 5.2.0 버전부터 추가된 도구로, npm 레지스트리에 올라가있는 패키지를 쉽게 설치하고 관리할 수 있도록 도와주는 CLI 도구로 실..