[React]react hook & SpringBoot [1/2]

728x90

1강 리액트 설치 및 사용방법.

1. VScode react 폴더 생성

2. node.js 설치

-node -v (설치 후 버젼 확인)

-npm -v

3. reacte 설치

: VScode 터미널에

npx create-react-app my-app

혹은

npm install -g create-react-app my-app

단! 디렉터리(폴더) 이름에 대문자가 들어가면 안 됩니다.

my-app은 폴더명이므로 변경가능

4. 설치 완료 후 터미널 폴더 경로 이동

cd my-app

5. VsCode에 ESlint 설치하면 문법 오류 찾아줌.

6. VsCode에 Prettier 문장 정렬

7. VsCode에 Reactjs code 설치, 문법, 자동 완성

8. Vscode my-app 폴더로 재시작

9. 설정 만져주기

9-1. 새파일 만들어서 세팅값 입력

9-2. file-preferences-settings-"format on save"

혹은

> 파란박스 클릭해주기

> format on save 체크해주기

9-3 file-preferences-settings-"default formatter"

none이면 프리티어로 설정

10. react 시작

npm start

2강 실행흐름이해하기

0. 리액트엔진

데이터변경감지해서 UI그려준다.

1. 실행과정

(index.html) - spa 리액트에서 페이지이동이란 바디의내용을 바꾼다.

package.json에 scripts에 보면 start:에 reacts-scripts start 가 있는데 이게 npm start이다.
npm start를 하면 index.js를 실행한다.
ReactDom.render(
<App />, //2.JSX문법
document.getElementById('root') // public에 index.html파일에 root라는것을 찾아서 <App />를 집어넣는다. 결국 열리는건 index.html이다.
);

3강 - 기본문법

기본 문법을 배워보자.

1. react는 하나의 태그만 return해준다.

이런 식으로 써주면 1개의 태그만 return하면서 여러 태그 효과를 낼 수 있다.

2. 변수 선언은 let 혹은 const로만 해야함. (var은 쓰지말 것)

function 안에

var b = 20;

이라고 쓰면 지역변수처럼 쓰이지 않고 함수 밖에서도 다 적용된다.

==> 일반적인 scope가 아니다. 헷갈림

하지만

let b = 20;

으로 해주면 함수 안에서만 쓸 수 있다.

==> 일반적이다.

10행 let a = 10; //변수

11행 const b = 20; //상수

은 자바스크립트 문법이고

14행 return은 jsx문법이므로

16행에 {a}는 jsp에서 ${} EL 표기를 쓰듯 쓰면 된다.

3. JSX 문법은 if 사용 불가능하다. 3항 연산자는 사용 가능하다.

<div>안녕1 {a === 10 ? '10입니다.' : '10이 아닙니다.'} </div>

4. 조건부 렌더링

>> True면 조건부 출력

>> False 면 아무것도 출력되지 않음

<h1>해딩태그 {b === 20 && '20입니다.'} </h1>

5. let c의 기본 값은 null이 아니라 undefined 값이다.

6. css 디자인

- 내부에 적는 방법

- 외부 파일에 적는 방법

- 라이브러리 사용 (부트스트랩, component-styled)

<div style={{ color: 'red' }}>

아니면 이렇게 해줘도 된다.

<div style={mystyle}>

이런 방법이 있다는 거만 알아두자.

.box-style 은 class 방식을 말한다.

20행처럼 class=""이 아니라 className=""으로 해줘야 한다. JSX 문법이다.

{}의 의미

JSX

{ }의 의미를 이해하려면 먼저 React를 처음배울때 다 이해하지 못하고 넘어갔던 JSX에 대한 이해가 있어야한다.

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

react에서 다음과 같이 쓰인 코드는 @babel이라는 자바스크립트 컴파일러를 통해 다음과 같이 javascript로 변환된다.

React.createElement(
  'div',
  {className: 'sidebar'}
)

react에서는 JSX를 javascript로 변환하기 때문에 javascript문법을 사용하기 위해서는 따로 mark를 해주어야 한다. 그것이 바로 { }인 것이다!

Javascript 코드

다음 내용은 공식문서의 내용을 참고했다.
{ }안에 쓰인 코드들이 정말 javascript 코드인지 살펴보자

<MainWrap>
      { userData && <Card/> }
    </MainWrap>코드를 입력하세요

대표적인 예시로 조건부 렌더링이다. 다음 코드는 javascript의 &&연산자를 이용한 javascipt 코드인 것이다.

<div className="card__top--weather">{weather}</div>

weather는 왜 { }에 감싸져 있는걸까? 그 이유는 weather가 javascript의 변수이기 때문이다.

{tags.map((tag, index) => {
            return (
              <div key={index} className="card__tags--tag">
                {tag}
              </div>
            );
          })}

다음 구문이 { }로 둘러싸여 있는 이유는 map이 javascript의 함수이기 때문이다.

javascript 코드는 { }로 감싼다는 규칙만으로는 이해되지 않는 몇몇 예시들을 밑에서 따로 정리해봤다.

props와 state

 const [year, setYear] = useState(getCurrDate().year);
 const [month, setMonth] = useState(getCurrDate().month);
 return (
        <Calendar
          currYear={year}
          setCurrYear={setYear}
          currMonth={month}
          setCurrMonth={setMonth}
        />

우리는 예시와 같이 props를 넘겨주고 state를 넘겨줄 때 { }를 사용한다. 그 이유는 props와 state 둘 다 javascript 객체이기 때문이다.

state와 props의 차이점은 무엇인가요?
props (“properties”의 줄임말) 와 state 는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.

다음은 react 공식문서에서 설명하는 state와 props의 차이이다.

inline style

import React from 'react';
import Hello from './Hello';

function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
    </>
  );

인라인 스타일은 javascript 객체 형태로 작성해야 한다. 따라서 Javascript객체인 style을 {style}로 사용하는 것이다. 위의 코드를 조금 변형해보면 다음과 같다.

import React from 'react';
import Hello from './Hello';

function App() {
  const name = 'react';

  return (
    <>
      <Hello />
      <div style={{
        backgroundColor: 'black',
        color: 'aqua',
        fontSize: 24, // 기본 단위 px
        padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  	}}>{name}</div>
    </>
  );

style을 굳이 선언하지 않고 객체를 바로 JSX문법 안에 넣어버린 것이다.

import

import Footer from "./components/common/Footer";
import React, { useState } from "react";

우리가 흔히 보는 import문이다. 여기서 { }는 어떤 기준으로 사용될까?
이것은 위의 경우들과는 다르게 이해해야 한다.

export default

{ }가 쓰이는 기준은 export 방식의 차이이다.

const a=1;
const c=3;
export {a};
export const b=2;
export default c;

import d,{a,b as e} from './Example.js';
console.log(a,e,d); //1,2,3

export default로 export 된 것은 따로 { } 로 감싸지 않고 import 해오고, 나머지 그냥 export한 것들은 { }로 감싸서 import 해야한다.

4강 - 배열(map, filter, slice, concat, spread연산자)

1. 깊은 복사 1번째 방법 : 스프레드 연산자

: 아래 이미지 12행에 해당하는 부분이다.

15,16행 은 작은 따옴표가 아니라 백틱이라고 숫자 1옆에 키이다.

자바에서 깊은 복사하려면 for문 돌리면서 새로 배열을 만들어 줘야 하는데 반해(스트림? 함수로 할 수도 있단다),

스프레드 연산자를 이용하면 매우 편함을 알 수 있음.

2. 깊은 복사 2번째 - concat 추가

>> concat은 불변함수이고

>> push는 불변함수가 아니다.

3. 깊은 복사 3번째 - 걸러내기

: 걸러내기는 삭제할때 주로 쓴다.

filter를 쓰면 n값에 for문처럼 1,2,3이 각각 반복되며 return 조건문에서 실행되며

return 1 != 1 은 false이므로 값이 출력되지 않는다.

return 2 != 1 은 true이므로 값 출력

return 3 != 1 은 true이므로 값 출력

4. 깊은 복사 4번째 - 잘라내기

slice를 쓰니 1,2만 출력됨

그런데

b4= [1,2]

c4 = [Array(2)] = [[1,2]] 로 값이 다르다.

(주의, 여기서 console.log(`c4의 값은 : ${c4}`); 이라고 해주면

값이 c4=[1,2]라고 출력되어 버림)

해결하기 위해선 흩뿌려주면 된다.

const c4 = [...a4.slice(0,2)];라고 써주면 된다.

결국 아래와 같이 쓰면 a4=[1,2,3] 배열 중간에 4라는 값을 넣을 수 있다.

이렇게 하면 c4=[1,2,4,3]

5. 깊은 복사 5번째 - 반복하기

for문은 1줄이 아니라서 JSX문법에서 못 쓴다.

중괄호 지우고 위와 같이 쓰면 리턴문이 된다.

근데 foreach는 리턴을 못 한다. void문이다.

그래서 중괄호 넣어쓰든 말든 return이 안되니깐 복사가 안 된다.

그래서 forEach문도 못 쓴다.

결론은

이렇게 map()을 쓰는 방법은 가능하다.

이렇게 써도 되고,

b5와 a5 다른 레퍼런스를 참조한다. 깊은 복사이므로!

이 방법의 장점은 값 하나하나를 가공할 수 있음.

5강 - 배열 수정하기(map과 spread응용)

배열을 수정해보자.

48행과 같은 값이 있을때 name의 값을 수정하고 싶으면

49행처럼 깊은 복사를 하고 name:"임꺽정"이라고 해주면

이렇게 값이 변경된 걸 볼 수 있다.

이렇게 하고 값 출력하면 뒤에 name:"임꺽정"이 덮어 쓰여진다.

data넣을때도 꼭 흩뿌려줘야 한다.

const b6 = {...data, ...a6};라고 하면

a6값이 뒤덮으므로 phone: "1111"이 된다.

map을 더 활용해보자.

여기서 id:2인 name값을 "홍길동"으로 바꿔보자.

const newUser = [...users] 와 같다. ( {...users} 아님, 수업 내용 오타인듯)

여기에 3항 연산자를 활용하면

이렇게 바꿀 수 있다.

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

6강 - useState

1. React hooks이란?

아주 쉽게 React는 클래스형, Hooks는 함수형이라고 생각하시면 됩니다.

리액트와 리액트 훅은 다른 라이브러리가 아닙니다.

같은 라이브러리이며 단지 클래스형으로 코드를 작성하느냐,

함수형으로 작성하느냐의 차이입니다.

그렇다면 왜 함수형을 사용하는 게 더 좋고, 모던하며, 효과적인지 알아보겠습니다.

클래스형?
함수형?

- 클래스형

처음 리액트는 클래스형으로 등장하였습니다.

하지만 로직이 비교적 복잡하여 컴포넌트 재사용에 용이하지 않았고,

코드가 불필요하게 길어지기도 했습니다.

그러하여 Facebook은 조금 더 실용적이고 코드도 줄일 수 있는

함수형의 리액트 훅을 발표하였습니다.

- 함수형

함수형의 리액트 훅은 컴포넌트를 재사용하기 정말 쉽습니다.

또한 제공되는 함수들을 사용하여 훨씬 더 쉽고 짧게 코드를 작성 가능합니다.

코드가 짧다는 것은 가독성면에서 뛰어나다는 뜻이기도 합니다.

하지만 모든 프로젝트를 함수형으로 작성할 필요는 없습니다.

얼마든지 클래스형으로 작성하고 싶다면 작성하실 수 있습니다.

하지만 가능한 모던하고 쉬우며 코드가 짧고

가독성까지 좋은 훅을 사용하시길 권장드립니다.

그렇다면 짧은 코드 예제로 훅이 어떻게 사용되는지 알아보겠습니다.

새로 생성하신 자바스크립트 파일에 코드를 작성하시면 됩니다.

저는 Another로 파일을 만들었지만 다른 이름을 사용하셨다면

변수 이름도 파일 이름에 맞게 설정해주세요.

(꼭 그렇게 해야 하는 것은 아니지만 이해하고 파악하기 쉽습니다.)

import React from 'react'; // import 리액트

const Another = () => { // 변수의 이름은 항상 대문자로 시작합니다. 되도록 파일 이름과 동일하게.
	return(
    	    <div>hello</div> // HTML이 아닙니다.
        );                   
}

export default Another; // 기본 값을 Another로 하여 export합니다.

이 코드가 기본 리액트 훅의 형태입니다.

전에 언급한 ES6의 arrow function을 이용한 것입니다.

return 안에 있는 코드들은 JSX라고 불리며,

HTML과 비슷하게 생겼지만 엄연한 자바스크립트 코드입니다.

리액트는 return안에 있는 컴포넌트들을 렌더링 하여

사용자의 브라우저에 보여주게 됩니다.

Another안에 또 다른 변수나 함수를 정의하지 않는다면,

코드를 더욱 짧게 쓸 수 있습니다.

import React from 'react';

const Another = () => <div>hello</div>;

export default Another;

어떤가요? 아주 간단해지지 않나요?

arrow function에서 즉각 리턴을 요한다면

중괄호와 return 키워드는 생략 가능합니다.

그러면 이제 본격적으로

useState에 관해 알아보도록 하겠습니다.

2. useState란? 어디에 어떻게 사용하는가?

useState는 기본적으로 getter와 setter입니다.

getter는 변수의 값을 가져오는데 이용하고,

setter는 변수의 값을 변경하는데 이용합니다.

이는 홈페이지에서 유저의 상호작용이나,

함수에 의해 변경될 수 있는 값들을 지정하고

변경하는 데 사용합니다.

이로써 해커나 다른 사람들이 지정되어있는 값을

쉽게 접근하지 못하게 하기도 합니다.

사용 예시 코드를 보겠습니다.

import React, {useState} from 'react'; // import 리액트와 useState

const Another = () => { // 변수의 이름은 항상 대문자로 시작합니다.
	const [name, setName] = useState();

	return(
    	    <div>hello</div> // HTML이 아닙니다.
        );                   
}

export default Another; // 기본 값을 Practice로 하여 export합니다.

이것이 바로 useState의 사용법입니다.

const [name, setName] = useState();

*useState를 import 해주어야 한다는 사실을 잊지 마세요!!

const 다음 대괄호를 이용, 두 개의 변수를 지정합니다.

하지만 name, setName과 같이 2번째 변수의 이름 앞에 set을 붙여

setter임을 알려주시는 게 좋습니다.

useState를 사용하는 또 다른 방법에 관해 알아보겠습니다.

const [name, setName] = useState();
// 아무런 값 없이 초기화.
// or

const [name, setName] = useState(10);
// 숫자 int 계열의 초기화 당연히 float과 같은 소수도 가능합니다.
// or

const [name, setName] = useState('');
// string 문자계열의 초기화.

상황에 따라 다르지만 처음 값이 불분명하다면,

아무것도 없는 괄호만 두시는 것이 편합니다.

후에 Typescript 사용 시 타입을 설정하면 되기 때문입니다.

하지만 지금은 Javascript로만 말씀드리겠습니다.

값을 이용하고 싶을 때는 아래 코드와 같이

첫 번째 변수를 사용합니다.

console.log(name);

변수의 값을 바꾸거나 새로 할당할 때는

아래 코드와 같이 2번째 변수를 이용하며,

함수처럼 괄호 안에 값을 지정해줍니다.

setName("Mike");

이렇게 쉽게 개발자는 값을 변경할 수 있습니다.

자 그러면!!

우리는 항상 실제로 어떻게 동작하는지

실행하고, 확인하며 코드만 보지 않고

결과물도 같이 보도록 하겠습니다.

3. 실전 예시

버튼을 누르면 숫자가 하나씩 올라가는 홈페이지를 만들어봅시다.

새로운 Number.js파일을 src 디렉터리(폴더) 안에 생성해주신 뒤

이렇게 코드를 작성하고 저장합니다.

import React, {useState} from 'react';

const Number = () => {
    const [number, setNumber] = useState(0); //값을 0으로 초기화.
    
    const counter = () => setNumber(number + 1); // 클릭시 +1
    
    return (<div>
    	      <button onClick={counter}>click</button> //클릭 버튼
              <div>{number}</div> // 중괄호안에 number을 입력합니다.
          </div>);
}

export default Number;

다음은 App.js라는 파일을 열어주세요.

그 후 이렇게 바꿔주세요.

import React, { useState } from 'react';
import './App.css';
import Number from './Number'; // import number 파일.

const App = () => {
  return (
    <div className='App'>
      <Number /> // 항상 대문자로 시작해야합니다.
    </div>
  );
};

export default App;

import Number from './Number';에 관해 짧게 알아봅시다.

("./Number"의 Number는 소문자여도 상관없지만

import 옆의 "Number"는 항상 대문자여야 합니다.)

import Number from './number'; // 사용가능
import number from './Number'; // 불가능

import 옆의 Number는 자바스크립트 파일안에 export를 불러옵니다.
ex) export default Number;
./Number는 생성하신 자바스크립트 경로와 파일 이름입니다.

자 그럼 브라우저에 이러한 버튼과 숫자가 생성되었나요?

그렇다면 버튼을 눌러보세요!!

여기서 눈여겨볼 점은, 우리가 버튼을 누르면 페이지 전체가

다시 Reload 되지 않았다는 점입니다.

당연히 지금은 버튼과 숫자밖에 없어 알아차리기 힘들지만,

컴포넌트가 많아지게 되면

확연히 드러나게 될 것입니다.

이로써 우리는 하나의 업데이트를 위해

페이지 전체를 Reload 하는 것이 아닌,

부분적으로 가장 효율적이게 홈페이지를

업데이트 할 수 있게 된 것입니다.

4. 마치며

정보를 아는 것과 그 정보로 무언가를 할 줄 아는 것은 큰 다름이지 않을까요?

무언가를 할 줄 안다는 것은

자신의 생각과 아이디어를 펼칠 수 있다는 뜻이기도 합니다.

꼬마 아이가 크레파스를 아는 것과 크레파스로 가족을 그리는 것은 다르니 말입니다.

항상 도전하고 실천하시는 그런 여러분이 되기를 바랍니다.

저 역시 지식을 나눌 줄 몰랐고, 블로그라는 매체를 통해 정보를 나누는 일을 할 수 있게 되어,

너무 기쁘고 항상 설렙니다.

모두 같이 어떠한 목표를 실천하는 사람이 되었으면 합니다.

항상 건강하시고 도전하세요!

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

7강 - useEffect

export default는 하나밖에 못하고 변수를 외부로 보낼려면

export { num };

처럼 써준다.

그리고 5행처럼 import하고

13행처럼 사용하면 된다.

1. useEffect란 무엇인가?

useEffect는 랜더링, 혹은 변수의 값 혹은 오브젝트가 달라지게 되면,

그것을 인지하고 업데이트를 해주는 함수입니다.

2. useEffect 사용 방법

2.1 렌더링 + 상태값 변동시 발동

useEffect(()=>{});

- 콜백 함수

- 거의 사용 x

2.2 렌더링 후 1번 실행

uesEffect(()=> {},[]);

- 콜백함수 + 빈 배열

2.3 렌더링 후 1번 + 배열 안 변수의 값이 변할 때마다 실행

const [name, setName] = useState();
useEffect(()=> {}, [name]);

- 콜백함수 + 배열

8강 - useMemo

Memoization

useMemo 함수에 대해서 알아보기 전에 알고리즘 시간에 자주 나오는 메모이제이션(memoization) 개념에 대해서 잠깐 짚고 넘어가겠습니다. memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다. memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있습니다.

랜더링마다 호출되는 컴포넌트 함수

일반적으로 React의 함수형 컴포넌트는 다음과 같은 구조로 작성이 됩니다.

function MyComponent(props) {
  // 어떤 로직 (JavaScript)
  return; /* 어떤 화면 (JSX) */
}

이렇게 작성된 컴포넌트 함수는 React 앱에서 랜더링(rendering)이 일어날 때마다 호출이 됩니다.

함수형 컴포넌트의 실행이 느리다면?

아래 컴포넌트는 prop으로 넘어온 x와 y 값을 compute 함수에 인자로 넘겨서 z 값을 구한 후, 그 결과값을 div 엘리먼트로 감싸 출력해줍니다.

function MyComponent({ x, y }) {
  const z = compute(x, y);
  return <div>{z}</div>;
}

컴포넌트의 재 랜더링이 필요할 때 마다 이 함수가 호출이 되므로 사용자는 지속적으로 UI에서 지연이 발생하는 경험을 하게 될 것입니다.

함수형 컴포넌트에 memoization 적용

랜더링이 발생했을 때, 이전 랜더링과 현재 랜더링 간에 x와 y 값이 동일한 경우, 다시 함수를 호출을 하여 z 값을 구하는 대신, 기존에 메모리의 어딘가에 저장해두었던 z 값을 그대로 사용하는 것입니다.

이러한 상황에서 memoization 로직을 직접 구현할 수도 있겠지만, 대신에 간편하게 사용할 수 있는 것이 바로 React의 useMemo hook 함수입니다. useMemo 함수는 2개의 인자를 받는데, 첫번째는 결과값을 생성해주는 팩토리 함수이고, 두번째는 기존 결과값 재활용 여부의 기준이되는 입력값 배열입니다.

function MyComponent({ x, y }) {
  const z = useMemo(() => compute(x, y), [x, y]);
  return <div>{z}</div>;
}

useMemo 임포트 방법

useMemo 함수는 React v16.8부터 기본적으로 내장되어 있는 Hooks 중 하나입니다. 따라서, 프로젝트에 react 패키지만 설치되어 있다면 named import를 통해 바로 임포트에서 사용할 수 있습니다.

import React, { useMemo } from "react";

useMemo

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useMemo로 전달된 함수는 렌더링 중에 실행된다는 것을 기억하세요.

통상적으로 렌더링 중에는 하지 않는 것을 이 함수 내에서 하지 마세요.

예를 들어, 사이드 이펙트(side effects)는 useEffect에서 하는 일이지 useMemo에서 하는 일이 아닙니다.

배열이 없는 경우 매 렌더링 때마다 새 값을 계산하게 될 것입니다.

9강 - useRef

CSS의 getElementsById 와 같은 선택자 역할이다.

Dom을 선택하거나 변경할때 사용된다.

예제1

import { useRef } from 'react';

function App() {
  const myRef = useRef(null);

  return (
    <div>
      <button
        onClick={() => {
          myRef.current.style.backgroundColor = 'red';
        }}
      >
        색변경
      </button>
      <div ref={myRef}>박스</div>
    </div>
  );
}

export default App;

useRef에는 current라는 key값이 있다.

버튼을 누르면 배경색을 변경시킬 수 있다.

예제2 - 배열

import { createRef, useState } from 'react';

function App() {
  const [list, setList] = useState([
    { id: 1, name: '길동' },
    { id: 2, name: '꺽정' },
  ]);

  const myRefs = Array.from({ length: list.length }).map(() => createRef()); 
  //createRef는 동적으로 ref를 배열로 생성해주는 함수

  return (
    <div>
      <button
        onClick={() => {
          console.log(myRefs);
          myRefs[0].current.style.backgroundColor = 'red';
        }}
      >
        색변경
      </button>
      {list.map(
        (
          user,
          index, //map의 두번째 파라미터는 index. 순회하며 번호를 만들어 응답해준다.
        ) => (
          <h1 ref={myRefs[index]}>{user.name}</h1>
        ),
      )}
    </div>
  );
}

export default App;

const myRefs = Array.from({ length: list.length }).map(() => createRef()); 는 myRefs를 배열로 만들기 위함.

useState보면 배열이므로 이거에 대응하기 위해 myRefs 를 배열로 만듦.

10강 - components styled

CSS 방식

App.css 파일 만들어서 import './App.css'; 해서 쓰자.

- App.js

- App.css

Component 방식(추천)

# npm으로 설치

npm install --save styled-components

# 혹은 yarn으로 설치하기

$ yarn add styled-components

#yarn 설치

yarn방식으로 하고 싶은데 yarn이 없다면

npm으로 해보고 (난 안돼서)

npm install -g yarn

brew로 설치 성공

brew install yarn

#component 예제

const Title = styled.h1`
	font-size: 1.5em;
	text-align: center;
	color: palevioletred;
`;

function App() {
  return (
    <div>
      <Title>헬로</Title>
    </div>
  );
 }

# Component 외부 파일로 두기

- MyCss.js

1라인 : import React from 'react';

- App.js

6라인 : default import값이 아니므로 { Title } 중괄호 해준다.

#추천 확장

# vscode-styled-components

자동완성 기능

# 각 컴포넌트들을 만든 후 pages 폴더에 페이지별로 정리하여 사용

Components들 즉 Header, Loign, Footer들을 합쳐둔 LoginPage.js를 만든다.

# 그러면 App.js에는 페이지 컴포넌트들만 불러와도 된다.

<LoginPage/>

# components 폴더는 공통은 공통끼리 login등 기능은 기능끼리 구분해두자

11강 - props(변수,함수 passing하기)

https://www.youtube.com/watch?v=HA-hR-64RXA

React 기본양식 작성은 : rsc

이렇게 rsc 자동완성 후 home.js 만들고

homepage를 완성해 주자.

9행 같은 data는 페이지.js에서 생성해두자

컴포넌트.js에서는 만들지 말 것을 권장.

<Home/>에는 boards값이 없지만 넣을수 있다 이걸 props라 한다.

넣어주면

25행 처럼 넣어줄 수 있다.

boards는 상태 data여야 한다.

그러면 home 컴포넌트에 가서

home.js로 가서

3행에 boards 이렇게 써주면 된다.

이게 function방식이고

class방식은

위 이미지 아래 코드가 class방식

위이미지 위 코드가 function방식이다.

8행 구조분할 할당! 방식을 쓸거다.

이렇게 할당해주면 된다.

이렇게 쓰면

이렇게 내용이 나온다. 매우 중요한 props

12강 - styled component props 패싱

13강 - styled-component 스타일 상속

이런 스타일을 상속하고 싶다면

8행에 tyled(StyledDeleteButton)과 같이 쓰면 된다.

14강 - 라우팅하기(react router dom)

react-router v5

여기 강의의 router는 5버젼이고 6버젼으로 향상되며 문법 바뀐 점들이 있음.

바뀐 문법은 여길 참고할 것.

https://late90.tistory.com/477

라이브러리 다운로드

npm i react-router-dom

설치 후 index.js로 간다.

index.js에서

<App/>을 <BorwserRouter>태그로 감싸준다.

그다음

App.js 로 간다.

url에 '/'가 있는경우

exact={true} 표기 필요.

url에 '/'가 있는경우

exact={true} 표기 필요 없음

router는 주소에 따라 객체만 변환시켜준다.

버튼 클릭시 URL이동

<Link to="/">홈</Link> 태그 사용.

URL에 따라 할당된 객체(페이지)에 props 값 확인해 보기

props 안에는 history, location, match, static 등의 정보가 있다.

history

location

match

props.match.params.id

버튼 눌러서 뒤로가기

9행과 같이 작성하면 된다.

버튼 눌러서 원하는 경로로 이동하기

5행, 10행 참고

링크 태그 CSS 주기

2행처럼 { Link } 임포트하고

14행처럼 스타일 상속 받아 쓰면 된다.

리액트 UI 라이브러리

다양하게 있지만

리액트 부트스트랩 추천

importing Components

리액트 부트스트랩 컴포넌트 끌어오면 아마 자동으로 임포트 될 것임.

리액트 부트스트랩 설치 (아래 2 중 택 1)

1. 라이브러리 npm 설치 (추천)

리액트 부트 스트랩 추천한다.

npm install react-bootstrap bootstrap

https://react-bootstrap.github.io/getting-started/introduction

2. 링크 태그 작성

<script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>

<script
  src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
  crossorigin></script>

<script
  src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
  crossorigin></script>

<script>var Alert = ReactBootstrap.Alert;</script>

브라우저에 링크 정보 등 작성해야 한다.

CSS import (아래 2 중 택 1)

1. 링크 태그 방법

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
  integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
  crossorigin="anonymous"
/>

CSS를 위해선 위에 링크 작성해야 한다.

작성 위치는 index.html 에서

여기

2. Css import 구문 작성해 주기 (추천)

index.js or App.js 에 작성해주면 된다.

node-modules 폴더 내에 이미 임포트 되어 있긴 함.

하지만 아래와 같이 App.js에 임포트 구문 작성해줘야함.

import 'bootstrap/dist/css/bootstrap.min.css';

리액트 부트스트랩 Navbar(메뉴) 에러 (중요)

href=""에 경로 넣으면 페이지 새로고침이 일어난다. (페이지 새로고침은 리액트에서 원하는 방향 아님)

그래서 39행을 36행과 같이 수정해줘야 싱글페이지로 작동이 가능하다.

className : Nav.Link ->nav-link

와 같은 방식으로 클래스명 수정해서 쓰면된다.

이건 w3schools.com에 명시되어 있음.

https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp

15강 글쓰기, 글목록보기 실습(1/2)

16강 - 글쓰기, 글목록보기 실습(2/2)

input value값 받기

35~44행이 핵심
42행이 java에는 없고 javascript에만 있는 변수를 동적으로 만들어내는 기능.
[e.target.name]에서 변수명 동적으로 가져온다.

63행에서 위에 만든 함수를 사용한다.

정리

value값에는 상태값.
onChange에는 setter값
name='title'을 주는 이유는 computepropertiesname이라고 아래 37행 문법을 쓸 수 있기 때문이다.

36행 안 넣으면 기존 값들이 사라지기 때문에 깊은 복사 해줘야한다.

17강 - flux

18강 - redux 적용

설치

npm방식

npm install react-redux

yarn방식

yarn add react-redux

Store

store.js

// 액션
export const increase = (username) => ({type: "INCREMENT", payload: username });
export const decrease = () => ({type: "DECREMENT"});

// 상태
const initstate = {
	username: "",
	number: 1,
    };
    
// 액션의 결과를 걸러내는 친구
const reducer = (state = initstate, action) => {
	switch (action.type){
    	case "INCREMENT":
        return { number: state.number +1, username: action.payload }; //return 되면 그걸 호출한 쪽에서 받는게 아니라 return되는 순간 ui변경
        case "DECREMENT":
        return { number: state.number -1 };
        default:
        return state;
        }
       };
       
export default reducer;

여기에 상태값과 setter함수 만들어 주고 아래에 index.js에 import해주면

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import reducer from "./store";

const store = createStore(reducer);

ReactDOM.render(
	<React.StrictMode>
    <Provider store={store}>
    	<App />
    </Provider>
    </React.StrictMode>,
    document.getElementById("root")
);

<Provider>태그에 store 담아서 <App/>을 감싸면 넘겨줘야하는 상태값들이 많을 경우에 넘겨주기 편해진다. 관리도 편해진다.

App.js

import
import
import Top from "./components/Top";
import Bottom from "./components/Bottom";

function App() {
	return (
    <div className='container'>
    <h1>최상단 화면</h1>
     <Top />
     <Bottom />
    </div>
   );
 }
 
 export default App;

Top.js

import "../App.css";
import React From "react";
import { useSelector } from "react-redux";

const Top = () => {
	const {number, username} = useSelector((store) => store);
    
    return (
    <div className = 'sub_container'>
    <h1>Top</h1>
    번호 : {number}
    이름 : {username}
    </div>
    );
    };
    
export default Top;

Bottom.js

import "../App.css";
import React from "react";
import { useDispatch } from "react-redux";
import { increase } from "../store";


const Bottom = () => {

	const dispatcher = useDispatch();
    
    return (
    <div className = 'sub_container'>
    <h1>Bottom</h1>
    <button onClick={()=>dispatcher(increase("cos"))}>증가</button>
    <button onClick={()=>dispatcher(decrease())}>감소</button>
    </div>
   );
   };
   export default Bottom;

App.css

.container{
	height: 700;
    border: 2px solid black;
    }
    
.sub_contaioner {
	height: 250;
    border: 2px solid black;
    }
    
div {
	padding: 10px;
   }

출처들:

https://www.youtube.com/watch?v=hdsALpVJwgU&list=PL93mKxaRDidEfLM0I_FFb-98vfAQgXT82