React 용어 정리

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  : node_modules에 들어있는 sass의 라이브러리 사용시 `를 사용하면 자동으로 탐지해서 스타일을 불러올 수 있다. **📌CSS Module** <span style="background-color: #ecf5c9;">&nbsp;CSS Module&nbsp;</span> : [파일이름]_[클래스 이름]_[해시값] 컴포넌트 스타일 클래스 이름 중복을 막아준다.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
자바스크립트 파일 하나에서 스타일까지 작성할 수 있어서 스타일 파일을 별도로 분리하지 않아도 된다는 장점이 있다.