• 함수선언에서의 this

  const obj = {
  name: "Giggles",
  greet: function() {
    console.log(this.name);
  }
  };
  

obj.greet(); // 결과: "Giggles"

* 함수표현식에서의 this
``` js
const obj = {
  name: "Giggles",
  greet: () => {
    console.log(this.name);
  }
};

obj.greet(); // 결과: undefined
/* 화살표 함수에서는 this가 obj를 가리키지 않고,
함수가 선언된 상위 스코프(전역, 또는 모듈의 this)를 그대로 사용함. */

• 함수선언에서의 this function A() { } 은 → "나를 누가 부르냐?"를 보고 그때그때 this를 정함.
• 화살표함수에서의 this () => { } 은 → "나 태어날 때 주인 누구였냐?"를 보고 고정함. (출생 시점이 중요함)
• 화살표 함수는 객체 안에서 쓰더라도 this를 객체인 "obj"에 바인딩하지 않는다. 오직 "선언 당시의 바깥 this"를 캡처할 뿐이다. 그래서 객체 안의 메서드는 보통 함수선언의 형태 function A() 로 쓴다.
• 화살표함수는 콜백 안에서 this 를 유지하고 싶을 때 유용하다.

  const obj = {
  name: "Giggles",
  greet() {
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
  };
  

obj.greet(); // "Giggles" ```

• 부모컴포넌트에서 자식컴포넌트로 정보를 전달하는 일반적인 방법은 Props 를 이용하는 것이다.
• 반면에, 자식컴포넌트에서 부모컴포넌트로는 State를 업데이트하는 것으로 정보를 전달할 수 있다.

부모컴포넌트에서 State 를 관리하고, 이 State 를 컨트롤하는 handler 를 자식에게 전달하면, 자식컴포넌트에서는 이 handler 를 통해서 부모의 State 에 접근할 수 있다. 이를 이용하여 자식에서 부모로 정보를 보낼 수 있게 된다.

1. State 가 업데이트 된 경우
2. 전달받는 Props 가 변경된 경우
3. 부모 컴포넌트가 리렌더링된 경우

리렌더링 되더라도 State의 초기화는 생성시에 한 번만 수행된다.

* 리액트 디벨로퍼 툴

React Developer Tools 는 크롬, 엣지 등의 브라우저에서 다운 받아 사용할 수 있는 확장프로그램이다. 컴포넌트트리와 실행시간, 부하측정 등에 유용하게 사용된다.

* 배열의 map 함수를 통하여 새로운 배열을 반환할 때에 새로운 배열의 각 반환 요소는 key 값을 가지고 있어야 한다.

myArray.map((elem, idx)=>{
  <React.Fragment key={elem.unique_key}>
    ...
  </React.Fragment>
});

단순히 map 함수의 인자로 전달되는 index 를 key 값으로 사용하는 것은 매우 좋지 않다. key 는 고유한 값을 가져야 하기 때문이다. 참고로 key 값은 map 메서드의 내부에서만 고유하면 되며, 다른 배열의 key 와는 겹쳐도 상관없다. 즉, 동일한 배열 내의 요소들 사이에서 key 가 중복되지만 않으면 된다.

• key 값으로 고유한 값을 할당하는 방법 1) 데이터 자체의 정보로부터 key 를 생성 2) Date.Now() 함수와 데이터를 섞어서 key 를 생성 3) uuid 라이브러리를 이용하여 key 를 생성

/* 터미널에서 라이브러리 설치 */
npm install uuid  

/* 터미널에서 라이브러리 설치 */
import { v4 as uuidv4 } from 'uuid';
uuidv4();  // '971dea4d-3b7d-4bad-9bdd-2b0h7b3dc26d'

* if 구문의 삽입

if 구문을 직접 JSX 식에 삽입할 수 없기 때문에, 즉시함수를 이용해서 JSX 식에 삽입할 수 있다.

export default function MyComponent() {
    return(
      <>
          { 
          (()=>{
              if(/*조건식*/)
               return <p> O </p>
            else
               return <p> X </p>
          })() /*즉시실행*/
        }
      </>
    )
}

* 간단한 조건분기 연산자

1) isActive ? 참일 때 : 거짓일 때 2) isActive && 참일 때 // isActive 가 참일 때에만 처리 3) isActive || 거짓일 때 // isActive 가 거짓일 때에만 처리

* classnames 라이브러리의 활용

className 속성에 공백을 활용하여 고정스타일과 선택스타일을 섞어서 사용할 때에 스타일 클래스 이름을 나열하기 쉽도록 도와준다.

/*기존*/
<div className="box light"></div>

/*라이브러리 활용*/
npm install classnames

import cn from 'classnames';
<div className={cn('box', 'light')}></div>

* 꾸미기 컴포넌트의 활용법

대상 컴포넌트를 꾸미기 컴포넌트로 감싸서 대상 컴포넌트를 특정한 방식으로 꾸미거나 조작할 수 있다.

/* StyledComponent.js */
export default function StyledComponent( {children} ) {
    return(
      <div style={padding: 10, border:'1px solid #111'}>
          {children}
      </div>
    );
}

/* MyComponent.js */
import StyledComponent from './StyledComponent.js'

export default function MyComponent() {
    return(
      <StyledComponent>
          <p>이 문장은 꾸며지게 됩니다.</p>
      </StyledComponent>
    );
}

* children 에 매개변수 전달하기

/* ListTemplate.js */
export default function ListTemplate( {arr, children} ) {
    return(
      <div style={padding: 10, border:'1px solid #111'}>
          {
              arr.map( (elem) => {
              <React.Fragment key={elem.id}>
                {children(elem.value)}
              </React.Fragment>
            }
        }
      </div>
    );
}

/* MyComponent.js */
import ListTemplate from './ListTemplate.js'

export default function MyComponent() {
    return(
      <ListTemplate arr={myArrayData}>
          {
              /* children 을 함수로 만든다. */
              /* 이 함수에서 반환하는 대상이 children 이 된다. */
              /* 함수이기 때문에 매개변수 전달하는 것이 자유롭다. */
              (value) => {
              <p> 반환되어 children 이 된다. </p>
              <p> {value} 값의 전달도 자유롭다. </p>
            }
        }
      </ListTemplate>
    );
}

• 참고할 내용 렌더프롭 Render Props

// 적절하지 못한 코드
function MyComponent() {
  const [num, setNum] = useState(0);

  const onClickButton = () => {
      setNum(num + 1); // 직접 num 을 변경
  };

  <button onClick={onClickButton}>버튼</button>
}

// 적절하게 변경한 코드
function MyComponent() {
  const [num, setNum] = useState(0);

  const onClickButton = () => {
      setNum( (prev) => prev + 1 ); // 변경할 함수를 지정
  };

  <button onClick={onClickButton}>버튼</button>
}

let arr1 = [1, 2, 3];

arr1.map( (element, index) => { console.log(index : ${index} , element is ${element});
} );

> 출력결과
index : 0 , element is 1
index : 1 , element is 2
index : 2 , element is 3


- filter : 배열의 모든 요소를 순회하며 참인 요소에 대해서만 로직을 실행한다. 아래는 짝수인 요소만 출력하는 코드이다.
```js
let arr1 = [1, 2, 3, 4, 5, 6];

arr1.filter(
  (element, index) => {
      if( element % 2 === 0 )
        return console.log(`index : ${index} , element is ${element}`);  
  }
);

출력결과 index : 1 , element is 2 index : 3 , element is 4 index : 5 , element is 6

let arr1 = [1, 2, 3];
console.log(arr1);         // [ 1, 2, 3 ]
console.log(...arr1);     // 1 2 3

- 배열의 얕은 복사와 깊은 복사
```js
let arr1 = [1, 2, 3];
let arr2 = arr1; // 얕은 복사(참조값 복사)

let arr3 = [4, 5, 6];
let arr4 = [...arr3]; // 깊은 복사

• 배열의 합성

  let arr1 = [1, 2, 3];
  let arr2 = [4, 5, 6];
  let arr3 = [...arr1, ...arr2];

a 태그는 페이지를 전환하면서 화면을 새로고침한다. 그러나, 라우터는 페이지를 새로고침하지 않으며 페이지를 전환할 수 있기 때문에 렌더링을 최소화하여 빠르게 화면전환이 가능하다.

(1) 라우터를 설치한다. 라우터를 설치할 프로젝트 상단 폴더에서 터미널을 열고 아래와 같이 명령어를 입력한다. ( 설치 후에는 package.json 파일의 dependencies 에서 설치된 라우터의 버전을 확인할 수 있다. )

npm install react-router-dom

(2) BrowserRouter 는 Routers 로 감싸고, Routers 는 여러 개의 Route 를 감싸는 형태로 사용할 수 있다.

<BrowserRouter>
    <Routes>
        <Route path="/" element={<Main></Main>}></Route>
        <Route path="/About" element={<About></About>}></Route>
        <Route path="/QNA" element={<QNA></QNA>}></Route>
    </Routes>
</BrowserRouter>

• Route 컴포넌트의 path 속성에 페이지의 경로를 지정하고, elememt 속성에 원하는 페이지(컴포넌트)를 지정한다.

<Route path="페이지경로" element={<Component></Component>}></Route>

• Link 컴포넌트는 마치 a 태그와 같은 역할을 하며, 페이지간 전환(이동)을 가능하게 한다. 단, a 링크를 사용하면 페이지의 전환 시 새로고침이 일어나지만 Link 컴포넌트를 이용하면 새로고침이 일어나지 않는다. ( Link 컴포넌트는 BrowserRouter 로 감싸야 한다. )

<BrowserRouter>
      <Link to="/"> Main 페이지로 이동 </Link>
      <Link to="/About"> About 페이지로 이동 </Link>
    <Link to="/QNA"> QNA 페이지로 이동 </Link>
    <Routes>
        <Route path="/" element={<Main></Main>}></Route>
        <Route path="/About" element={<About></About>}></Route>
        <Route path="/QNA" element={<QNA></QNA>}></Route>
    </Routes>
</BrowserRouter>

//[A.js]
export default myArray = 1;

//[B.js]
import arr from "./A.js"

(2) export 할 때, default 로 지정되지 않은 대상은 import 할 때 중괄호 { } 의 내부에 써야하며, 이름도 export 할 때의 이름을 그대로 써야한다. 만약, 다른 이름으로 import 하고 싶다면 as 키워드를 사용한다.

//[C.js]
export myMap = 2;

 //[D.js]
import { myMap as MAP } from "./C.js"

기본적인 훅

• useState
• userEffect
• useContext

추가적인 훅

• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue

이 외에 사용자정의 훅도 사용할 수 있다.

import {useState} from 'react';

export default function Hello() {
    // name : 변수의 이름
    // setName : 변수를 변경하는 함수
    // setName 이라는 함수를 통해서 name 변수를 변경하면 렌더링을 자동으로 한다.
    // useStat() 는 배열을 반환하며, 매개변수는 name 의 초기값이 들어간다.
    const [name, setName] = useState('Mike');

    function changeName() {
        const newName = name === "Mike" ? "Jane" : "Mike";
        setName(newName);
    }

    return (
        <div>
            <h1> State </h1>
            <h2> {name} </h2>
            <button onClick={changeName}> Change </button>
        </div>
    );
}

위의 name 이라는 state 는 컴포넌트마다 따로 관리가 되기 때문에 Hello 컴포넌트가 3개 존재할 때, 첫 번째 name 이 바뀌어도 나머지 2개의 컴포넌트의 name 은 바뀌지 않는다.

(1) 태그에 직접 인라인 스타일로 적용하는 방법. 이 때, CSS 문법에서의 대쉬 "-"를 쓰지 않고, 카멜케이스로 적어야 한다. (예: border-right 대신에 borderRight 로 적는다 ) 하지만 큰 프로젝트에서는 적용하기 힘든 방법이다.

export default function Component () {
    return (
        <div>
            <p style={
                {
                    color: 'red',
                    borderRight: '2px solid #000',
                    backgroundColor: 'blue',
                    marginBottom: '30px',
                    opacity: 1,
                }
            }>
                Hello
            </p>
        </div>
    );
}

(2) 컴포넌트별 css 모듈을 작성하고 이용하는 방법. Hello.js 모듈에서 사용할 css 는 Hello.module.css 파일에 작성한다. css 파일이 header 에서 중복되는 문제를 해결할 수 있다.

/* Hello.module.css */
.box {
    width: 200px;
    height: 50px;
    background-color: blueviolet;
}

// Hello.js
import styles from "./Hello.module.css";

export default function Hello () {
    return (
        <div>
            <p className={styles.box}> 
                Hello 
            </p>
        </div>
    );
}

(1) 컴포넌트는 함수로 작성하며, 컴포넌트 이름은 대문자로 시작한다. (2) export 하여 다른 파일에서 사용할 수 있도록 한다. (3) return 값은 반드시 하나의 태그를 반환하도록 한다.

export default function Component {
    return (
        <div>
            ...
        </div>
    );
}

리액트 프로젝트 시작하기

(1) 먼저 node js 를 설치한다. (2) 코드에디터(예 visual code 등)를 설치한다. (3) cmd 또는 power shell 같은 명령창에서 아래 명령어를 입력한다.

    npx create-react-app [폴더이름]

(4) 코드에디터에서 만들어진 프로젝트 폴더를 열고 터미널을 연다. (5) npm start 명령어를 입력하면 웹페이지가 열린다.

1. 아래의 두 코드는 같은 기능이다. // 노드에서는 require 만 사용가능하다 const React = require('react'); // 바벨이 import 를 require 로 바꿔준다. import React from 'react';

2. export 되는 것이 "객체"이거나 "배열"이라면 구조분해의 형식으로 import/require 할 수 있다.

3. 내보낼 때, default 가 아니라면 여러번 내보내기가 가능하다. export const hello = 'hello'; 가져올 때, import { hello }

내보낼 때, default 는 한 번만 사용 가능하다. export default NumberBaseball; 가져올 때, import NumberBaseball;

1. node 설치
2. VS code 에서 프로젝트 폴더를 생성하고 터미널을 연다.
3. npm init 을 입력하여 프로젝트를 초기화 한다. (npm : 노드패키지매니저)
4. npm i react react-dom 을 입력하여 설치한다.
5. npm i -D webpack webpack-cli 를 입력하여 설치한다. (-D : 개발용)
6. npm i -D @babel/core @babel/preset-env @babel/preset-react @babel-loader

• webpack 설정 파일

7. 프로젝트 폴더에 webpack.config.js 를 생성한다.

   const path = require("path");
   

module.exports = { name: "project-name", // 모듈이름 mode: 'development', // 배포시 : production devtool: "inline-source-map", // 소스맵 생성 여부와 방법을 제어 resolve: { // 모듈을 해석하는 방식 extensions: [".js", ".jsx"], }, entry: { // file.js 를 대상으로 웹팩이 빌드를 수행 app: ["./file.js"], }, module: { rules: [ { // babel-loader를 이용해 규칙에 적용 test: /.jsx?/, loader: "babel-loader", options: { presets: ["@babel/preset-env", "@babel/preset-react"], }, }, ], }, // 컴파일 + 번들링된 js 파일이 저장될 경로와 이름 지정 output: { path: path.join(__dirname, "dist"), filename: "app.js", }, };