React

create-react-app 을 이용한 개발환경 구축

React Development Tools // 크롬확장프로그램에서 설치 -> 개발자도구에 React탭을 활용하면 더 좋다~

 

JSX

JavaScript를 확장한 문법

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

가독성을 위해 여러줄로 나누면 좋다.

 

React의 중요파일

src/index.js // 메인 프로그램, html템플릿 및 JavaScript의 컴포넌트를 조합하여 렌더링하고 실제 표시

src/App.js // 컴포넌트를 정의하는 프로그램. 실제로 화면에 표시되는 내용 등은 여기에서 정의, JSX형태로 표시

public/index.html // index.js에 의해 랜더링된 결과가 표시

 

폴더구조

public // 완성된 js파일들이 출력될 곳

src // 정적 파일

package.json // 프로젝트가 의존하는 패키지들이 나열

package-lock.json // 패키지들이 내부적으로 사용하는 의존성 트리에 대한 정보

 

CSS사용법

css-module // 컴포넌트 별 스타일 적용시 충돌방지가능

css-in-js // styled-components 사용

scss // node-sass패키지 설치

 

Component와 Props와 State

컴포넌트는 JavaScript함수와 유사

함수 컴포넌트, 클래스형 컴포넌트가 있음

사용자 정의 컴포넌트는 항상 대문자로 시작해야함

Props는 읽기 전용, 컴포넌트를 외부에서 관리

State는 내부적으로 상태를 관리

 

함수형 vs. 클래스형 구분

[함수형 컴포넌트]에서는 인수에서 비구조화 할당으로 {value} 를 통해 받아옴

  - hook?

[클래스형 컴포넌트]에서는 this.props.value로 참조.

  - set, setState 사용

 

react-router-dom 사용법

Browser // history API를 사용해 URL과 UI를 동기화하는 라우터

Route // 컴포넌트의 속성에 설정된 URL과 현재 경로가 일치 시 해당하는 컴포넌트, 함수를 랜더링

Link // to 속성에 설정된 링크(url)로 이동<Link to='/test1'>

Switch // 사용하지 않을 경우 매칭되는 모두를 랜더링 or 사용시 하나의 매칭되는 요소만 랜더링

 

요소, 생성과정

react는 가상DOM을 이용하며, 실제 DOM과 비교해 변경된 부분만 실제 DOM에 반영

최초의 render단계는 ReactDOM.render에 의해 수행

그 이후의 render단계는 setState가 수행, 비교해서 필요한 부분만 업데이트

 

생명주기

초기화단계

  - constructor

  - getDerivedStateFromProps

  - render

  - componentDidMount

 

 

createRef vs. useRef

createRef // class형 컴포넌트에서 ref를 잡아야하는 경우

useRef // 함수형 컴포넌트에서는 둘다 사용가능하지만 createRef를 사용할경우 리렌더링될때마다 ref값이 초기화되므로 useRef를 사용하자.

 

Strict Mode

애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구

안전하지 않은 생명주기를 사용하는 컴포넌트 발견

레거시 문자열 ref 사용에 대한 경고

권장되지 않는 findDOMNode 사용에 대한 경고

예상치 못한 부작용 검사

레거시 context API 검사

-> 개발모드에만 영향을 끼치고, 잠재적인 이슈를 발견해줌

-> strict Mode에서 해결되지 않는 오류는 <React.Fragment>로 수정할 경우 해결이 됨.

 

Hook

16.8에서 추가된 기능

Hook이란? 함수 컴포넌트에서 React State와 생명주기 기능을 연동할 수 있게 해주는 함수

class안에서는 동작x

종류: state hook, effect hook, context hook 커스터마이징 훅

state hook : 상태값을 관리

-> 중복되는 로직을 유틸 함수와 같은 느낌으로 [커스텀 훅]을 만들어서 중복 로직을 최소화 시킬 수 있다.

const [state, setState] = useState(initialState); // state와 setState 의 이름은 임의로 정할 수 있음

예시)
// 커스텀 훅
import { useEffect } from 'react';

// ... 비즈니스 로직
const useINOrg = (orgId, orgWrapId, options = {}, eventCallback = {}) => {

    useEffect(() => {
        // ... 비즈니스 로직
        return () => {
            // componentWillUnmount
            if () {

                // // ... 비즈니스 로직
            }
        }
    }, []);

}

export default useINOrg;

// 위의 훅을 사용
import React from "react";
import useInput from "useINOrg";

// state
const [text, setText] = useInput({
  email: "",
  password: ""
});

return (
  <>
    <input id="email" value={text.email} onChange={setText} />
    <input id="password" value={text.password} onChange={setText} />
  </>
);

effect hook : 어떤 Effect를 발생시키고 싶을 때 사용, useEffect함수의 두 번째 매개변수로 배열을 입력하면, 배열의 값이 변경되는 경우에만 함수가 호출. 즉, componentDidMount와 componentWillUnmount에서만 실행되는 것과 같은 효과가 있음.

context hook : 클래스형 컴포넌트에서 사용했던 contextAPI를 함수형 컴포넌트에서 사용할수있게 해줌.

커스터마이징 훅 : 

규칙 : 최상위 레벨에서만 호출 가능, 함수 컴포넌트 내에서만 호출 가능

 

useState in Array

값을 할당해서 set array
// const aa = [...checkedNodes, pkey];
// setCheckedNodes(aa);

화살표 문법
// setCheckedNodes(checkedNodes => [...checkedNodes, pkey]);
// setCheckedNodes(checkedNodes => checkedNodes.concat(pkey));

push는 되도록 사용하지 않는다. 
// const newTodos = checkedNodes.slice();
// newTodos.push(pkey);
// setCheckedNodes(newTodos);

 

------------------------------------------------------

 

npm run start // VS Code 터미널창에서 개발서버 실행

 

localhost:3000 에서 화면 보기 가능

 

npm run build // 해당 react-app 폴더 내 build폴더를 생성(deploy대상)

 

Taskkill /IM node.exe /F // 켜진 서버 종료 : npm stop으로 안됨...