리액트 문법 정리

 

1. 컴포넌트의 사용

HTML을 return 하는 function을 만들고, 외부에서 사용할 수 있게 export 한다.

다른 js 파일에서 해당 function을 import 한 다음에, 해당 컴포넌트를 HTML 태그처럼(<AddComponent>) 넣어서 사용할 수 있다.

 

 

 

1-1. HTML 태그 컴포넌트에 파라미터 값 전달하는 부분

 

 

1-2 Form에서 구성하는 컴포넌트에 특정 오브젝트 값 전달하는 부분

 

 

부모 App State의 구성요소 State 값을 변경하는 함수를 실행하여서, App 컴포넌트가 리렌더링 되는 것 로그에서 확인할 수 있었음.

 

 

2.  리액트 import CASE 정리

 

1) 상수 변수 가져와서 사용하는 케이스

 

 

 

3. axios 라이브러리 사용한 통신

 

동기란, 어떤 작업을 실행할 때 그 작업이 끝나기를 기다리는 방식이다.

즉, 작업이 완료될 때까지 다음 코드의 실행을 멈추고 기다리는 것이다.

이러한 방식은 작업의 순서를 보장하고, 작업이 끝날 때까지 결과를 기다리는 것이 가능하다.

 

비동기란, 어떤 작업을 실행할 때 그 작업이 완료되지 않더라도 다음 코드를 실행하는 방식을 의미한다.

즉, 작업이 완료되지 않았더라도 결과를 기다리지 않고 다음 코드를 실행하는 것이다.

이러한 방식은 작업이 오래 걸리는 경우 시간을 절약하고, 병렬적인 작업 처리가 가능하다.

 

# 자바스크립트는 싱글 스레드(single thread) 기반의 프로그래밍 언어이다.

하나의 스레드에서 모든 작업을 처리하도록 되어 있기 때문에, 한 번에 하나의 작업만 처리할 수 있다.

 

비동기 처리가 필요한 이유

1. 웹 페이지의 반응성 향상 : 비동기 처리를 통해 사용자의 요청에 빠르게 반응할 수 있도록 한다.

2. 네트워크 통신 : 웹앱은 서버와의 데이터 통신이 필요하다. 동기적인 처리를 하게 되면 응답을 기다리는 동안 다른 작업을 수행할 수 없기 때문에 웹 페이지의 반응성이 떨어질 수 있다. 따라서 비동기적으로 데이터를 받아오는 것이 웹 페이지의 성능을 향상시키는데 도움이 된다.

3. 병렬 처리 : 비동기 처리를 통해 여러 작업을 동시에 처리할 수 있다. 이를 통해 시간이 오래 걸리는 작업을 병렬적으로 처리할 수 있으며, 결과적으로 전체 작업 시간을 단축시킨다.

4. 에러 처리 : 비동기적으로 처리할 때 에러가 발생하면, 해당 에러를 쉽게 처리할 수 있다. 에러 발생 시, 에러를 처리할 수 있는 콜백 함수를 실행하거나, 에러를 캐치하여 처리할 수 있어 프로그램의 안정성을 높일 수 있다.

 

 

async, await란

async와 await는 ES2017(ECMAScript 8) 부터 추가된 자바스크립트의 비동기 처리 방식 중 하나이다.

async와 await를 사용하면 비동기 코드를 동기 코드처럼 작성할 수 있어, 가독성이 좋아지고 에러 처리가 간단해진다.

 

async는 함수의 앞에 붙어서 해당 함수가 비동기 함수임을 나타내며, await는 비동기 함수의 실행 결과를 기다리는 키워드이다.

async 함수 안에서 await 키워드를 사용하면, 해당 비동기 작업이 완료될 때까지 코드 실행을 일시 중지하고 결과를 기다린 다음, 해당 결과를 반환한다.

 

await 키워드는 Promise 객체가 완료될 때까지 코드 실행을 일시 중지하므로, try-catch 블록 안에서 사용하여 에러 처리를 할 수 있다.

 

https://trustmitt.tistory.com/85

async / await 개념 정리 (Feat. 동기, 비동기)

 

 

 

 

4. 리엑트  useState

React 에서 수 많은 컴포넌트들을 만들게 된다.

그 중 'state', 즉 '상태' 가 없는 컴포넌트는 드물다.

대다수의 컴포넌트가 적어도 하나의 useState()는 사용하게 된다.

 

https://velog.io/@jaychang99/React-%EC%9D%98-useState-%EB%BF%8C%EC%8B%9C%EA%B8%B0

React 의 useState 뿌시기

 

 

 

리엑트 이벤트 다루는 방법

리엑트에서 이벤트 다루는 방법

- 리엑트에서 이벤트의 이름은 카멜 케이스로 사용한다.

- 문자열이 아닌 JSX 함수명으로 전달한다. ( onClick={함수명} )

 

 

이벤트 처리(핸들링) 방법

이벤트를 실행할 코드를 그대로 전달하는 것이 아니라 함수의 형태로 객체를 전달한다.

- 핸들링 함수를 선언하든

- 익명 함수로 처리하던

- 예시는 아래 블로그 참조

 

 

이벤트 객체 예시

const handleChange = (event) => {
      console.log(event.target.value + "라고 입력하셨네요.");
    }

 

 

많이 쓰이는 DOM 이벤트

• onClick
• onChange
• onKeyDown, onKeyUp, onKeyPress
• onDoubleClick
• onFocus
• onBlur
• onSubmit

 

 

 

 

https://lakelouise.tistory.com/261

[React] 리액트에서 이벤트를 다루는 방법

 

 

 

 

5. 리엑트 axios

 

http://127.0.0.1:8080/api/products/list?page=3&size=5

 

pathVariable을 넘길 때 객체(json)으로 넘기네, 근데 params는 그냥 고정값인건가?

 

 

 

 

 

 

5. modal창 로직

아래 그림은, 서버에서 데이터 가져오기 전에 modal 창을 보여주는 로직

컴포넌트가 렌더링 될 때 useEffect에서 모달창 보이도록 state True로 바꾸고, axios로 서버에서 데이터 가져오면 False로 바꾼다.

 

리턴하는 HTML 영역에서는 삼항연산자로 모달 컴포넌트를 리턴한다.

 

 

 

리엑트 반복문

.map()으로 반복문 돌림 ,

그런데 .map() 에서는 에로우 펑션 () => {} 이 아니라, () => () 으로 괄호를 치는데, 왜인지는 잘 모르겠네?

 

 

 

6. useRef()

특정 DOM의 요소의 레퍼런스를 직접 가져올 때 사용한다.

자바스크립트에서 특정 DOM 요소를 선택할 때, document.querySelector('#input').value 스크립트로 가져와서 사용을 한다.

 

그런데 useRef() 훅을 사용하면, 특정 요소에 연결시켜주는 것 만으로도 요소의 객체 자체를 변수로 가져올 수 있는 것이다.

 

 

 

 

번외 ...(전개연산자)

... 전개 연산자를 사용해서 배열, 객체의 깊은 복사를 할 수 있다.

 

var arr = [1,2,3];

var copy1 = arr; // 얕은 복사

var [...copy2] = arr; // 깊은 복사

var copy3 = [...arr]; // 깊은 복사

 

https://yuddomack.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%AC%B8%EB%B2%95-%EB%B9%84%EA%B5%AC%EC%A1%B0%ED%99%94-%ED%95%A0%EB%8B%B9

 

 

아래는 state object 스프레드(...) 연산자로 사용하는 경우

setFormValue 에서 state를 받아서, ...로 state 속성들을 전부 입력한다. 

그런데 name: value로 name값은 입력 되었으므로 덮어쓰기해서 새로운 object를 생성한다.

  const [formValue, setFormValue] = useState({

    name: "",

    contry: "",

    address: "",

  });

 

          <TextInput

            value={formValue.name}

            setValue={(value) => {

              setFormValue((state) => ({

                ...state,

                name: value,

              }));

            }}

 

 

 

추가

특정 배열안의 state의 값을 수정할 때 state 변경하는 메서드에 아래처럼 값을 넣어주면 변경이 적용되지 않는다. (정확하게는 화면의 리렌더링이 일어나지 않는다.)

화면이 리렌더링이 되지 않는 이유는 값은 변경되었지만 memos 변수가 가르키는 객체 레퍼런스가 변경되지 않아서(?정말 정확하게는 모름) react가 State가 변경되었음을 인지하지 못해서 라고 한다.

const newMemos = memos;

 

그렇기에 아래처럼 대괄호 쓰고 ... 전개연산자로 사용하면 배열 안의 오브젝트를 꺼내서 새로운 공간에 배열로 다시 감싸서 만들어주기 때문에 memos가 가르키는 객체 레퍼런스가 변해서, 리렌더링이 된다.

 

const newMemos = [...memos];

 

 

i

import { useState } from "react";

import "./App.css";

import MemoContainer from "./components/MemoContainer";

import SideBar from "./components/SideBar";

function App() {

  const [memos, setMemos] = useState([

    {

      title: "Memo 1",

      content: "This is memo 1",

      createdAt: 1728346675314, // new Date().getTime();

      updatedAt: 1728346675314,

    },

    {

      title: "Memo 2",

      content: "This is memo 2",

      createdAt: 1728346675312,

      updatedAt: 1728346675312,

    },

  ]);

  const [selectedMemoIndex, setSelectedMemoIndex] = useState(0);

  const setMemo = (newMemo) => {

    const newMemos = [...memos];

    newMemos[selectedMemoIndex] = newMemo;

    setMemos(newMemos);

  };

  return (

    <div className="App">

      <SideBar memos={memos} />

      <MemoContainer memo={memos[selectedMemoIndex]} setMemo={setMemo} />

    </div>

  );

}

export default App;

 

 

 

 

 

자바스크립트 템플릿 리터럴 : 백틱(` `), 달러(${ }) 사용법

백틱 (` `)

 

ES6부터 새로 도입된 문자열 표기법

문자열 생성시 따옴표 대신, ``을 사용한다.

 

장점 : ``을 사용하면 줄바꿈을 쉽게 표현 가능, 기존 따옴표 방식에서는 줄바꿈이 허용되지 않았었음.

 

표현식 삽입

${ } 사이에 변수나 연산 등을 삽입할 수 있게 된다.

 

 

 

https://curryyou.tistory.com/185

[JS] 자바스크립트 템플릿 리터럴: 백틱(``), 달러(${ }) 사용법