1. React 기본용어
React : UI를 만들기 위한 자바스크립트 라이브러리
CRA : Creative-React-App 의 줄임말, react 개발환경을 더 편리하게 사용하기 위해서 사용하는 tool chain
node.js : 탈웹! 브라우저 외에서도 자바스크립트를 실행하게 해주는 실행 환경
npm : node package manager. node로 실행되는 여러가지 패키지들을 관리함
node-modules : package들 관리하는 파일
.gitignore : github에 올리지 않을 파일들의 모음. 기본적으로 node modules는 ignore에 들어가있다.
package.json : dependencies를 통해서 필요한 모듈을 설치해준다.
index.js : import React from 'react'; 과 import ReactDOM from 'react-dom';를 통해 많은 컴포넌트들을 하나로 모아주는 역할
Component : 재사용 가능한 UI 구성단위 (class형, 함수형)
→ 가독성, 유지보수, 재사용 가능 => 확장성 개발을 가능하게 함
JSX : react 자바스크립트 확장 문법, 이 문법을 통해 자바스크립트 안에서 HTML 마크업을 할 수 있게 됨, DOM을 불러올 필요 없이 바로 이벤트등을 사용할 수 있다.
SPA :Single Page Application : 페이지가 한 개인 어플리케이션(즉, html이 1개인 app)
Routing : 단일 페이지 내에서 여러개의 페이지를 보여주기 위한 방법
즉, url(경로)에 따라 다른 화면(view)를 보여주는 것
Router : 경로를 찾는 도구
jsconfig.json : 닫혀 있는 파일에도 자동완성 작동( 최상위 디렉토리에 생성)
2. State, Props, Event, Ref
컴포넌트명.defaultProps{ props명 : 내용 } : props의 기본값 설정
children : 태그와 태그 사이의 내용을 보여줌. 따라서 자식 컴포넌트에서 props.children을 사용하면 부모 컴포넌트에서 태그와 태그 사이에 있던 내용을 보여준다
비구조화 할당(destructuring assignment) : 객체에서 값을 추출하는 문법
ex const { name, children } = props;
함수형 컴포넌트에서는 props를 사용할 때 파라미터 부분에서 비구조화 할당 문법 사용
ex const MyComponent = ({name, children}) => { return ~~ }
propTypes : 컴포넌트의 필수 props를 지정하거나 타입을 지정할 때
import PropTypes from 'prop-types' 필수!
클래스형 컴포넌트에서 props 사용 : 클래스형에서 props를 사용할 때는 render함수 내에서 this.props를 조회한다.
state : 컴포넌트 내부에서 바뀔 수 있는 값
✔클래스형 컴포넌트가 가진 state와// 함수형 컴포넌트에서 useState 함수를 통해 사용하는 state
✔참고 _ props는 부모 컴포넌트가 설정하는 값이며, 읽기전용으로만 사용가능. 따라서, props를 바꾸려면 부모 컴포넌트에서 바꿔줘야 한다.
컴포넌트의 state는 객체 형식!!!
이벤트로 설정할 함수를 넣어 줄 때는 화살표 함수 문법 사용
this.setState : state값 변경함수, 이를 사용해서 state값을 업데이트 할 때는 상태가 비동기적으로 업데이트 된다. ( 사용한다고 state값이 바로 바뀌는 것이 아니다)
✔this.setState 사용시 객체 대신에 함수를 인자로 넣어주는 방법
prevState : 기존 상태, props : 현재 지니고 있는 props
this.setState((prevState, props) => {
return {
//업데이트 하고 싶은 내용
}
} this.setState가 끝난 후 특정 작업 실행하기 : setState의 두번째 파라미터로 콜백함수를 불러오면 된다.
useState : useState함수의 인자에 상태의 초기값을 넣어준다. 이 때 반드시 객체가 아니여도 상관없다.
✔useState함수를 호출하면 배열이 반환되는데, 첫번째 요소는 현재 상태이고, 두번쨰 요소는 상태를 바꿔주는 함수이다.
event : 카멜표기법 작성, 이벤트 실행시 함수 형태의 값 전달, DOM 요소에만 이벤트 설정
이벤트 종류 확인하러가기
onChange : input요소의 변화를 감지하는 이벤트
e.target.name : onChange 이벤트에서 input의 name을 가리킴 ( input이 여러개일 때 아주 유용하게 사용!!)
ref : 리액트에서 id 역할.
DOM을 직접적으로 건드려야 할 때만 사용한다. ①콜백 함수를 통한 ref설정 ②createRef를 통한 ref설정
onDubleClick : HTML요소를 더블클릭할 때 사용함
3. Component styling
📌Scss
npm install node-sass --save : scss 설치 명령어 (버전 지정시 : npm install node-sass@4.14.1 --save)
nesting : 최상위 요소부터 하위요소까지 스타일 속성 정의 (한 컴포넌트 전체를 nesting)
$ : 변수처럼 사용
@mixin : 재사용되는 스타일 블록을 함수처럼 사용
& : 함께 사용되는 클래스 앞에 붙인다.
@import '다른 scss파일경로' : 다른 scss파일 불러오기 (utils.scss같이 여러 파일에서 사용될 수 있는 믹스인이나 변수의 경우 따로 분리해서 작업하는 파일들을 import를 사용해서 컴포넌트.scss에 불러올 수 있다.)
npm run eject : sass-loader 설정을 커스터마이징 하기 위한 명령어
@import '~library/styles : nodemodules에 들어있는 sass의 라이브러리 사용시 ~ 를 사용하면 자동으로 탐지해서 스타일을 불러올 수 있다.
📌CSS Module
CSS Module : [파일이름][클래스 이름]_[해시값] 컴포넌트 스타일 클래스 이름 중복을 막아준다.
className={styles.{클래스이름}} 형태로 전달해주면 클래스 이름 뒤에 해시값이 붙어있는 것을 확인할 수 있다.
import React, { Component } from "react";
import styles from "./CSSModule.module.css";
class CSSModule extends Component {
render() {
console.log(styles);
return (
<div className={`${styles.wrapper} ${styles.inverted}`}>
안녕하세요, 저는 <span className="something">CSS Module</span>
</div>
);
}
}
export default CSSModule; classnames : 컴포넌트에서 조건부로 클래스 설정 시 사용 (props 값에 따라 다른 스타일 주기 등
설치 명령어 : npm install classnames --save
📌styled-components
자바스크립트 파일 안에 스타일을 선언하는 방식
CSS-in-JS : 여러 라이브러리가 존재함. 그 중 하나인 styled-components
npm install styled-components --save
자바스크립트 파일 하나에서 스타일까지 작성할 수 있어서 스타일 파일을 별도로 분리하지 않아도 된다는 장점이 있다.
