Homile

React.Fragment란?

DOM에 별도의 노드를 추가하지 않고 여러 자식 요소를 그룹화할 수 있습니다.

JSX 제한 사항

JSX 코드를 작성할 때 Root 요소가 존재하지 않고 나란히 존재하고 있다면 JSX 문법에 위반하는 행위가 됩니다.

아래의 코드와 같이 JSX는 ReactDOM 요소로 작성이 가능합니다. 한개의 Root 요소 안에는 여러개의 요소가 존재할 수 있지만 Root 요소는 여러개가 존재할 수 없다는 것입니다.

// JSX 문법에러
return (
    <h2>안녕하세요 여러분!!</h2>
    <p>만나게 되어 반갑습니다!</p>
);

// JSX 문법을 ReactDOM으로 변경한 코드
return (
	React.createElement('h2' {}, '안녕하세요 여러분!')
	React.createElement('p' {}, '만나게 되어 반갑습니다!')
);

JSX 제한 사항 해결 방안

이를 해결하기 위해서 <div>태그를 사용하는 경우 디자인 작업을 할 때 작업속도가 느려지기 때문에 대신 사용하는 것이 바로 Fragment 입니다. Fragment를 사용할 경우 아무것도 없는 요소라고 JSX문법은 판단을 하지만 Root 요소라고 판단을 하기도 합니다.

또한, div를 남발하여 사용할 경우 불필요한 div가 화면에 모두 렌더링 됩니다.

// <div>를 통한 JSX 문법 에러 해결
return (
    <div>
        <h2>안녕하세요 여러분!!</h2>
        <p>만나게 되어 반갑습니다!</p>
    </div>
);


// Fragment를 통한 JSX 문법 에러 해결
return (
    <React.Fragment>
        <h2>안녕하세요 여러분!!</h2>
        <p>만나게 되어 반갑습니다!</p>
    </React.Fragment>
);

// Fragment 단축 문법
return (
    <>
        <h2>안녕하세요 여러분!!</h2>
        <p>만나게 되어 반갑습니다!</p>
    </>
);

리액트 에러 발생

React server를 실행하고 있을 때, 콘솔에서 에러 코드가 나오지만 웹페이지에서도 콘솔창과 동일한 에러 코드가 나옵니다.

에러코드와 함께 해결할 수 있는 방향을 제시해줍니다. 해당 에러 코드 조각과 해결 방안을 통해 프로그램을 디버깅* 할 수 있습니다.

이렇기 때문에 항상 콘솔에 나오는 에러 코드를 확인해야 합니다.

자주 발생하는 에러

JSX 요소 규칙

• JSX로 작성한 요소를 하나의 루트 요소로 감싸주어야 합니다.
• 이때, 쓸모없는
• 태그로 감싸줄 시 디자인 요소에 방해가 될 수 있습니다.
• 이것은 React.fragment(<></>)를 사용하여 하나의 루트 요소로 감싸주어 에러를 해결할 수 있습니다.

함수명 오타

• State를 관리하는 함수를 자주 사용해야 하는 만큼 함수명이 많아짐에 따라 오타를 잘 체크해야 합니다.

코드의 흐름 및 경고 분석

• 컴파일 오류를 일으키지 않아 에러 코드를 볼 수 없는 경우가 있습니다. 이러한 경우 코드 로직을 하나씩 찾아가며 체크를 해야 합니다.
• 코드 로직을 하나하나 찾아가면 시간이 많이 걸리기 때문에 다른 방법으로 개발자 도구를 켜서 Console 창을 확인하면 어떠한 경고가 나오고 있는지 어떤 파일의 몇 번째 줄에 문제가 있는지 알 수 있습니다.

중단점(breakpoint) 작업하기

• 개발자 도구의 Source 탭에 가면 소스파일이 있는 경로를 확인할 수 있습니다.
• 확인하고 싶은 파일을 클릭하여 파일을 실행시키고 코드를 선택한 부분에서 작업을 정지할 수 있으며, 함수의 흐름에 따라 코드를 찾아가며 확인할 수 있습니다.
• Source탭에서 나온 코드를 수정하여 에러의 유무를 확인할 수도 있습니다.

React DevTools 사용하기

• 크롬에서 사용할 수 있는 플러그인 중 React Developer Tools을 사용하면 컴포넌트의 트리 구조를 볼 수 있습니다.
• 해당 컴포넌트를 클릭하면 props로 넘어오는 값과 각종 요소를 확인할 수 있습니다.
• 특히 가장 좋은 부분은 state의 값을 확인할 수 있다는 것입니다.

*디버깅?

프로그램 개발 단계 중에서 발생하는 오류나 버그를 찾아내고 그 원인을 밝히고 수정하는 작업입니다.

참고자료

• udemy: 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

Redux?

Redux는 전역 상태 관리 라이브러리이다.

Redux와 같은 라이브러리로는 Mobx, Recoil, Ovemind.js가 있다. 가장 많이 사용되는 것은 Redux이며, 다음으로 Mobx가 있었는데 Recoil이 등장하면서 점점 사용율이 밀리는 추세이다.

Redux를 사용하는 이유

1. 모든 컴포넌트가 props 없이 state를 직접 꺼낼 수 있다.

• 상위 컴포넌트에서 하위 컴포넌트로 state를 넘겨야 하는 데 하위 컴포넌트가 너무 많을 경우 사용
• state를 보관하는 파일을 하나 만들어서 state를 다 보관하여 모든 컴포넌트들이 props 없이 꺼내서 쓸 수 있다.

2. 상태(state) 관리하기 용이하다.

• 모든 컴포넌트에서 state를 변경하기 시작할 경우 버그가 생기면 모든 컴포넌트에서 에러를 찾아야한다. 하지만, redux를 사용할 경우 state를 보관하는 장소에서 수정 방법까지 지정해두고 컴포넌트에서 수정방법을 요청(요청만 가능)하면 state가 변한다.
• 그렇기 때문에 버그가 발생할 경우 state보관 장소에서 찾아서 해결할 수 있다.

Redux의 구조

Action

• state를 바꾸는 방식을 설정한다.
• type을 지정하여 Action 객체가 어떤 동작을 하는지 역항르 명시해 주어야합니다.
• 대문자와 Snake Case로 작성합니다.
• 필요에 따라 payload를 작성해 구체적인 값을 전달합니다.

Dispatch

• Reducer로 Action을 전달해주는 함수입니다.
• Action에 동작을 요청하는 것으로 Action 객체를 파라미터로 받는다.

Reducer

• Dispatch에게서 전달받은 Action 객체로 변화를 일으키는 함수로 Action 객체의 type에 따라 상태를 변경하는 함수입니다.
• Reducer는 외부 요인으로 인해 값이 변경되는일이 없는 순수함수여야 합니다.

Store

• 상태가 관리되는 오직 하나뿐인 저장소의 역할을 합니다.
• Redux의 상태가 저장되어 있는 공간입니다.

Redux의 동작 과정

Action → Dispatch → Reducer → Store

1. Action을 정의한다.
2. Dispatcher에서 Aciton객체를 파라미터로 받아 Reducer 함수로 전달한다.
3. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소(Store)의 상태를 변경한다.

참고자료

• 코딩애플 https://youtu.be/QZcYz2NrDIs
• 생활코딩 https://youtu.be/yjuwpf7VH74

Create React App

리액트 프로젝트를 시작하는 가장 쉬운방법입니다.

기본적인 리액트 코드 파일이 있는 미리 설정된 폴더들과 상용화할 수 있는 리액트 앱을 구축할 수 있도록 돕는 가장 중요한 환경설정 파일들이 존재합니다. 작성한 프로그램을 미리보기 할 수 있도록 해주고 코드나 기타 다른 것들이 변경될 때마다 브라우저가 자동적으로 페이지를 업데이트 하는 방식으로 이 프로그램을 미리 볼 수 있어 개발 과정을 단순화시켜 줍니다.

node.js

브라우저 밖에서 자바스크립트 코드가 실행될 수 있도록 하는 자바스크립트 런타임이 필요하다. 리액트를 위해 필요한 것은 아니지만 create react app을 실행하기 위해 node.js가 필요하기 때문에 node.js를 먼저 설치를 해줘야 한다.

Create React App 명령어 사용

• 터미널을 실행한 후 경로를 설정한다.
• npx create-react-app "생성할 폴더명"

• 명령어 실행 후 아래와 같은 화면이 나온다면 정상적으로 설치 된 것이다.

• 설치가 정상적으로 되었다면 생성된 리액트 폴더에 연결하여 npm start 명령어를 작성하면 리액트 서버가 실행됩니다.

• 정상적으로 실행되었다는 문구가 나온다면 http://localhost:3000/ 에 접속하여 실행결과를 볼 수 있습니다.(기본경로)

• 서버를 종료하고 싶다면 서버가 구동중인 터미널로 가서 ctrl+c를 눌러 구동을 멈출 수 있습니다.
• VScode를 사용중이라면 리액트 폴더를 열어서 npm install 명령을 사용하여 package.json에 있는 프로젝트에 필요한 모든 패키지와 개발에 필요한 것들을 다운로드해서 설치합니다.

React?

JavaScript 라이브러리이며 사용자 인터페이스를 만드는 데 사용됩니다.

화면을 새로고침하여 모든 요소를 렌더링 하지 않고, 요청하는 요소만 렌더링하는 방식인 SPA를 사용한다.

내장된 기능은 많지 않아서 라우팅 같은 기능이 필요하다면 추가적으로 서드 파티 라이브러리를 설치해야 한다.

React를 사용하는 이유

일반적인 DOM을 조작하여 HTML들의 요소들을 렌더링 할 때는 JavaScript만 사용해도 가능하지만 사용자에게 뭔가 다른 요소들을 보여주려 할 때 새로운 HTML 페이지를 불러오지 않고 화면만 변경해 사용자에게 보여줄 수 있게 해주는 것이 가능하다.

1. 개발자에게 확장 가능한 대화형 웹 응용 프로그램을 구축하기 위한 검증된 도구를 제공하는 코드를 작성할 수 있다.
2. 최신 반응형 사용자 인터페이스를 구축하여 복잡한 사용자 인터페이스를 쉽게 만들 수 있도록 해준다.
3. 컴포넌트를 사용하여 유지보수와 관리가 용이하도록 유지된다.

SPA (Single Page Application)

링크를 클릭하고 새로운 페이지를 로드 할 때 페이지를 전환한 것처럼 보이지만 실제로 서버로부터 새로운 페이지를 요청하지 않고, 화면에 보이는 컴포넌트를 변경해줘서 페이지가 전환된 것처럼 보이는 것입니다.

다른 프레임워크

Angular

컴포넌트 기반의 UI 프레임워크이며, 리액트와 마찬가지로 컴포넌트에만 초점을 맞추고 있다.

리액트보다 더 많은 내장 기능을 가지고 있으며 처음부터 타입스크립트를 수용했다.

하지만 너무 많은 기능이 내장되어 있기 때문에 작은 프로젝트보다 규모가 큰 프로젝트에 적합하다.

리액트와 컴포넌트를 구성하는 방법이 다르다.

Vue.js

Angular와 react를 합쳐놓은 구조이며, 컴포넌트 기반의 UI 프레임워크입니다.

기능이 Angula보다는 적고,React보다는 많으며 라우팅 같은 핵심 기능을 포함하여 의존성이 낮습니다.

왜? React를 선택했는가?

Angular, vue보다 가볍기 때문에 소규모 프로젝트에 적합하고, 현재 국내 및 해외에서 많은 기업들이 React를 사용하고 있기때문에 장기간 사용할 수 있는 라이브러리라고 생각이 되었기 때문입니다.

또한, 웹 앱을 만들 때 React Native를 사용하여 웹 앱을 구현할 수 있기 때문에 React를 선택하였습니다.

Local Storage란?

• 브라우저 내 데이터를 가지고 있는 저장소
• sessionStorage와 같지만 sessionStorage는 브라우저를 닫을 경우 데이터가 삭제된다.
• Local Storage는 브라우저를 새로고침, 닫기를 실행해도 데이터가 보존된다.
• 하지만, 시크릿 모드를 사용하여 Local Storage에 담긴 데이터는 시크릿 모드로 열린 브라우저를 닫으면 데이터가 삭제된다.

Local Storage 사용법

• 로컬 스토리지 내 데이터 저장
  • 객체 형태로 저장 된다.

//                     key     value
localStorage.setItem('minwoo', 'cho');

• 로컬 스토리지 내용 가져오기

const name = localStorage.getItem('minwoo');

• 로컬 스토리지 내용 삭제

localStorage.removeItem('minwoo');

• 로컬 스토리지 초기화

localStorage.clear();

값이 많을 경우

• 값이 많을 경우 value에 문자열로 할당된다.
• 이러한 경우를 방지하기 위해 JSON.stringify, JSON.parse를 사용한다.
• JSON.stringify를 사용하여 원하는 형태로 값을 할당
• JSON.parse를 사용하여 원래의 형태로 값을 받아옴.

const name = ['kim', 'lee', 'cho'];
localStorage.setItem('name', name);

const str = localStorage.getItem('name')
console.log(str);    // 'kim,lee,cho' 값이 문자열로 리턴


/*=================================================*/
localStorage.setItem('name', JSON.stringify(name));
const str2 = localStorage.getItem('name');
console.log(JSON.parse(str2));    // ['kim', 'lee', 'cho'] 배열 리턴

Local Storage 내용 보기(크롬기준)

1. F12를 눌러 개발자도구를 연다.

2. 개발자 도구 내 Apllication 탭에 들어간다.

3. 사이드 탭에 Storage -> Local Storage를 확인한다.

참고자료

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage