함수형 프로그래밍은 무엇인가

: 자료 처리를 수학적 함수의 계산으로 취급하는 프로그래밍 패러다임.

순수 함수와 보조 함수의 조합을 통해 로직 내 존재하는 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제해 상태 변경을 피하려고 한다. 

* 다른 패러다임으로 명령형, 객체 지향 등이 있다. 

함수형 프로그래밍의 특징

- 부수 효과가 발생하지 않는다.

* 부수 효과(Side-Effect)란?

: 함수가 만들어진 목적과는 다른 효과, 혹은 부작용

콘솔 또는 파일 I/O || 예외가 발생하여 프로그램 실행이 중단되는 경우 || 데이터가 변경되는 경우
=> 위와 이 변화가 발생하는 작업을 부수 효과가 발생한다고 말한다. 

- 순수 함수가 존재한다.

* 위에서 언급한 부수 효과가 없는 함수를 순수 함수라고 일컫는다. 

- 변경 불가능한 값을 활용한다.

* 불변값을 사용하면 병렬성, 동시성 문제를 쉽게 해결할 수 있다.

 또한 값을 예측하게 해주어 신뢰를 보장할 수 있다. 

* 원본 값을 바꾸지 않는 것이 중요

- 1급 객체가 존재한다.

* 함수형 프로그래밍에서 함수 = 일급 객체

 함수를 변수에 할당하고, 인자로 받고, 반환 값으로 활용하는 것이 가능하다. 

일급 객체

: 다른 요소들과 아무런 차별이 없음

* 람다(Lambda)와 고차 함수 (Higher Order Function) 

: 람다 = 익명 함수 / 고차 함수 = 다른 함수를 인자로 전달받는 함수 (외부의 조작으로 함수의 인자 조작 불가)

- 참조 투명성이 있다.

* 동일한 인자에 대해 항상 동일한 결과를 반환하고 기존 값을 변경되지 않고 유지된다. 

함수형 프로그래밍 개념의 순수 함수

: 순수 함수는 오직 입력으로 들어오는 파라미터에만 의존하기 때문에, 

함수의 매개 변수로 들어온 값을 직접 변경하는 일을 피하기만 해도 순수 함수를 만들 수 있다.

독립적인 함수이기 때문에 부수 효과가 발생하지 않다. 

순수 함수의 조건

1. 같은 입력값이 주어졌을 때, 언제나 같은 결과값을 리턴한다.

2. 사이드 이펙트를 만들지 않는다. 

OOP와 함수형 프로그래밍의 차이

1. 일급 객체의 차이

함수형 프로그래밍의 일급 객체 = 함수 자체

OOP의 일급 객체 = 클래스, 혹은 객체가 일급 객체

2. 프로그램

함수형 프로그래밍 = 상태값이 없는 함수들의 연속으로 이루어짐

: 값의 연산 & 결과 도출 중심으로 코드 작성이 이루어진다. 

OOP = 상호작용하는 객체들의 집합

: 클래스 디자인 & 객체 관계 중심으로 코드 작성이 이루어진다. 

결론

함수형 프로그래밍은 최대한 줄이기 위해 노력하는 코드이다.

관계를 줄이고, 상태값을 줄이고 최소한의 인풋과 아웃풋을 남겨 순수 함수를 최대한으로 활용한다. 

차이를 잘 몰랐었는데 실질적인 개발에는 대부분 객체 지향을 사용했지만 코딩 테스트 문제의 경우 대부분 함수형 프로그래밍을 사용한 것 같았다. 고차 함수를 더 활용해서 효율적인 코드 사용하는 방법을 더 연습해야겠다. 

객체 지향과 함수형 프로그래밍을 적절하게 잘 선택하고 조합해 활용할 수 있도록 더 공부해야겠다. 

출처

https://poiemaweb.com/js-array-higher-order-function

https://itstory1592.tistory.com/120

https://velog.io/@jakeseo_me/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%9D%BC%EB%A9%B4-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%A0-33%EA%B0%80%EC%A7%80-%EA%B0%9C%EB%85%90-22-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B3%A0%EC%B0%A8-%ED%95%A8%EC%88%98Higher-Order-Function-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

https://medium.com/@la.place/higher-order-function-%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-1c61e0bea79

HTTP와 HTTPS의 가장 큰 차이 : 보안

HTTP : Hypertext Transfer Protocol - 클라이언트와 서버 간 통신을 위한 통신 규칙 세트, 또는 프로토콜

HTTPS : Hypertext Transfer Protocol Secure - HTTP의 확장, 더 안전한 버전

* 브라우저에서는 HTTPS가 아닌 모든 웹 사이트는 안전하지 않은 것으로 표시된다.

HTTS 프로토콜의 작동 버전

HTTP는 암호화 되지 않은 데이터를 전송한다. 데이터를 안전하게 만들기 위해 HTTP는 HTTP 요청 및 응답을 SSL 및 TLS 기술에 결합한다. 

HTTPS 웹 사이트는 독립된 인증 기관인 CA(Certificate Authority)에서 SSL/TLS에서 인증서를 획득해야 한다.

SSL : Security Sockets Layer, 보안 소켓 계층

TLS : Transport Layer Security, 전송 계층 보안

SSL 인증서는 암호화 정보를 포함하므로 서버와 웹 브라우저는 암호화 된 데이터나 스크램블된 데이터를 교환할 수 있다. 

1. 사용자 브라우저의 주소 표시줄에 https:// URL 형식을 입력하여 HTTPS 웹사이트를 방문한다.

2. 브라우저는 서버의 SSL 인증서를 요청하여 사이트의 신뢰성을 검증하려고 시도한다.

3. 서버는 퍼블릭 키가 포함된 SSL 인증서를 회신으로 전송한다. 

* 비대칭 공개 키 인프라를 사용 - 두 개의 서로 다른 키를 사용하여 두 당사자 간의 통신을 암호화

: 개인 키 _ 웹 사이트 소유자가 관리하며, 비공개로 유지된다. 공개 키로 암호화 된 정보를 해독하는 데 사용.

: 공개 키 _ 안전한 방식으로 서버와 상호 작용하고자 하는 모든 사람이 사용 가능. 공개 키로 암호화 된 정보는 개인 키로만 해독이 가능.

4. 웹 사이트의 SSL 인증서는 서버 아이덴티티를 증명한다. 브라우저에서 인증되면, 브라우저가 퍼블릭 키를 사용하여 비밀 세션 키가 포함된 메시지를 암호화하고 전송한다.

5. 웹 서버는 개인 키를 사용하여 메시지를 해독하고 세션 키를 검색한다. 그런 다음, 세션 키를 암호화하고 브라우저에 승인 메시지를 전송한다. 

6. 이에 브라우저와 웹 서버 모두 동일한 세션 키를 사용하여 메시지를 안전하게 교환하도록 전환한다. 

HTTPS를 선택하는 이유

- 보안

: HTTP 메시지는 일반 텍스트여서 권한이 없는 당사자가 인터넷을 통해 쉽게 액세스할 수 있다.

하지만 HTTPS는 모든 데이터를 암호화 된 형태로 전송하고 받기 때문에 권한이 없는 경우 데이터에 접근할 수 없다.

- 권위

: 검색 엔진은 더 안전성 있는 HTTPS의 순위를 HTTP 웹 사이트보다 높게 지정한다.

- 성능 및 분석

: HTTPS 웹 애플리케이션은 HTTP 애플리케이션보다 로드 속도가 더 빠르다.

HTTPS 는 참조 링크도 더 잘 추적이 가능하다.

HTTPS에 관한 정보

- ACM (Amazon Certificate Manager)은 AWs 서비스 및 내부 연결 리소스와 함께 사용할 수 있는 퍼블릭 및 프라이빗 SSL/TLS 인증서를 프로비저닝, 관리 및 배포한다. ACM은 SSL/TLS 인증서를 구매, 업로드 및 갱신하는 시간 소모적인 수동 프로세스를 대신 처리한다. 

AWS Certificate Manager

- CloudFlare는 2014년 Universal SSL을 출시했으며 SSL 인증서를 무료로 제공한 최초의 기업이다. 손쉽게 HTTPS를 활성화 가능하다.

CloudFlare

탐색 (Navigation)

: 웹 페이지를 로딩하는 첫 단계

- URL 전송

- 링크 클릭

- 폼 제출 등의 동작으로 요청 시 발생

=> 탐색까지의 과정을 최소화 하는 것이 목표

DNS 조회 (DNS Look Up)

: Domain Name System. 해당 페이지의 자원이 어디에 위치하는 지 찾는 것.

브라우저에서 DNS 조회를 요청한다 

=> 해당 Domain의 서버에 의해서 처리되고, IP 주소로 응답.

=> 일정 기간 동안 캐시되기 때문에 캐시되는 동안 다시 조회 할 경우 캐시에서 IP 주소를 검색하여 후속 요청.

TCP HandShake

: 연결을 설정하기 위해 데이터 전송 전 통신하려는 두 주체의 TCP 소켓이 매개변수를 주고 받을 수 있도록 한다.

TLS Negotiation

: 보안성있는 연결을 위한 또 다른 핸드셰이크. 통신 암호화에 쓰일 암호를 결정하고, 서버를 확인한다.

응답 (Response)

: 웹 서버로 한 번 연결이 성립되고 나면, 브라우저는 유저 대신 초기 request를 보낸다. 웹 사이트는 대게 HTML 파일을 요청한다. 서버가 요청을 받을 시, 관련 응답 헤더와 함께 HTML의 내용을 응답하게 된다.

혼잡 제어(Congestion Control) / TCP 슬로우 스타트 (TCP Slow Start)

: TCP 패킷은 전송 중에 세그먼트로 분할된다. 서버는 세그먼트를 전송한 후 클라이언트로부터 ACK 패킷 형태로 승인을 받아야 한다. 전송 시간 증가 혹은 과부하를 막기 위해 세그먼트 수의 균형을 맞춰야 한다. 이를 위해 TCP 슬로우 스타트 알고리즘을 사용하여 데이터의 양을 점차적으로 늘리고 부하가 높은 경우 전송되는 데이터의 양을 줄인다. 

구문 분석 (Parsing)

: 브라우저가 데이터 청크를 받으면, 구문 분석을 시작한다.

브라우저가 네트워크를 통해 받은 데이터를 DOM이나 CSSOM으로 바꾸는 단계이다. 이는 렌더러가 화면에 페이지를 그리는 데 사용된다.

DOM 트리 구축

HTML을 처리하여 DOM 트리를 만든다. 

- 토큰화와 트리 생성을 포함한다. 

- DOM 트리는 문서의 내용을 설명한다.

CSSOM 구축 (Building the CSSOM)

: CSS를 처리하고 CSSOM 트리를 만드는 것. 브라우저는 CSS 규칙을 이해할 수 있고 작업을 진행할 수 있도록 스타일 맵으로 변환한다. 

CSSOM 트리는 사용자 에이전트의 스타일 시트를 포함한다.

렌더 (Navigation)

: 렌더링 과정에는 스타일, 레이아웃, 페인트 그리고 합성이 포함된다. 

CSSOM과 DOM 트리는 구문 분석되는 과정에서 생성되고 렌더 트리로 합성된다.

렌더 트리는 보이는 요소의 레이아웃을 계산한다.

그리고 요소가 화면에 페인트 된다.

레이아웃 (Layout)

: 각 노드의 도형 값을 계산하기 위해 레이아웃을 실행하는 것.

처음 노드의 사이즈와 위치가 결정되는 것을 레이아웃,

이후 노두의 크기와 위치를 다시 계산하는 것을 리플로우 라고 부른다. 

상호작용 (Interactivity)

: TTI (Time to Interactive) 는 DNS 조회와 SSL 연결이 이루어지는 첫 요청부터 페이지가 상호작용할 준비가 될 때까지 얼마가 걸리는 지를 측정하는 단위이다. 

쉽게 정리

Domain 조회 => 실제 서버 연결 => 서버에서 클라이언트로 HTML 파일 전송 => 구문 분석 과정 중 DOM 트리, CSSOM 트리 생성 => 분석 종료 시 두 트리를 합쳐 Render Tree 생성.

근데 만약 JS 포함 시 ? HTML 파싱 중 Script 태그를 만나 JS 실행을 위해 파싱 중단 => 제어 권한을 JS 엔진에게 넘김.

+ 리액트의 렌더링 과정

: 렌더 단계 + 커밋 단계로 이루어진, 브라우저가 렌더링에 필요한 DOM 트리를 만드는 과정

렌더 단계

: 렌더가 트리거되면 DOM 에 그려질 요소들을 파악하는 과정을 거치게 된다.

초기 렌더 : render() 메소드의 루트 컴포넌트 호출

리렌더 : 상태 업데이트가 발생한 컴포넌트 호출

커밋 단계

- 렌더 단계의 변경 사항을 실제 DOM에 적용해 사용자에게 보여준다.

1. 렌더링 프로세스가 시작

=> 리액트는 루트부터 훑으며 변경 사항이 있는 컴포넌트를 찾는다.

2. 변경사항이 있어 업데이트가 필요한 컴포넌트를 찾으면 클래스 내부의 render() 함수를 실행

=> 결과물 저장

3. 렌더링 결과물은 JSX 문법으로 구성 => JS로 컴파일 되면서 React.createElement()를 호출하는 구문으로 변환하며 JS 객체를 반환.

4. 가상 DOM과 비교해 실제 DOM에 반영하기 위한 모든 변경 사항을 차례로 수집

참고

https://developer.mozilla.org/ko/docs/Web/Performance/How_browsers_work

React로 웹사이트 만들기

React Router로 웹사이트 만들기

• 리액트에서는 모든 것을 컴포넌트로 만든다
  • 웹페이지도 컴포넌트화해서 만드는 것
• React Router 라이브러리를 통해 쉽게 만들 수 있다.
• Single Page Application
• Client-side Rendering
• Server-side Rendering

리액트 라우터 v6 소개

• 리액트 라우터
  • 리액트 컴포넌트로 페이지를 나누는 라이브러리
• Router
  • 리액트 라우터에서 사용하는 데이터를 모두 가지고 있는 역할
  • Context
    • Props를 거치지 않고 데이터를 넘겨 준다
      • 데이터를 넘겨주는 부위 → Context Provider
• Routes
• Route
• Link
  • 리액트 라우터에서 a 태그 대신 사용하는 것

Routes로 페이지 나누기

function Main() {
  return (
    <BrowserRouter>
      <App>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="courses" element={<CourseListPage />} />
          <Route
            path="courses/react-frontend-development"
            element={<CoursePage />}
          />
          <Route path="wishlist" element={<WishlistPage />} />
        </Routes>
      </App>
    </BrowserRouter>
  );
}

export default Main;

• Routes 컴포넌트는 여러 개 Route를 포함한다.
• 위에서부터 차례대로 path와 일치하는 지 검사한다.
• 일치하는 path를 찾을 시 지정한 element를 실행한다.
  • elemet는 jsx 함수를 지정한다!

Link로 이동하기

    <Link to="/courses">카탈로그</Link>

• / 를 사용하는 이유 : 절대 경로임을 표시하기 위해서이다.

NavLink로 네비게이션 구현하기

• 네비게이션에서 사용하는 링크라는 뜻
• style 속성으로 스타일을 지정해줄 수 있다.

function getLinkStyle({ isActive }) {
  return {
    textDecoration: isActive ? 'underline' : '',
  };
}

 <NavLink style={getLinkStyle} to="/courses">

useParams로 동적인 경로 만들기

• path로 모든 변수를 지정할 수는 없기 때문에 알아서 변수를 지정해 path를 결정하는 것을 동적인 경로라고 말한다.

<Route path=":courseSlug" element={<CoursePage/>}

없는 페이지 처리하기

 <Route path="*" element={<NotFoundPage />} />

Navigate로 리다이렉트하기

• 이유가 있어서 페이지를 리다이렉트해야하는 경우
• 로그인 되어있지 않은 경우 로그인 페이지로 리다이렉트하는 로직 설계 가능

  if (!course) {
    return <Navigate to="/courses" />;
  }

• Navigate로 편하게 설계 가능

useSearchParams로 쿼리 사용하기

• 쿼리 스트링
  • 주소에서 추가적인 조건을 넣을 때 사용할 수 있다.

{initKeyword && courses.length === 0 ? (
        <Warn
          className={styles.emptyList}
          title="조건에 맞는 코스가 없어요."
          description="올바른 검색어가 맞는지 다시 한 번 확인해 주세요."
        />
      ) : (
        <div className={styles.courseList}>
          {courses.map((course) => (
            <CourseItem key={course.id} course={course} />
          ))}
        </div>
      )}

react-helmet

 <Helmet>
        <title>Codethat - 코딩이 처음이라면, 코드댓</title>
 </Helmet>

• head에 덮어쓰기 때문에 helmet 태그
• 컴포넌트마다 title을 덮어쓸 수 있다.

싱글 페이지 어플리케이션 이해하기

• 싱글 페이지 어플리케이션이란
  • 하나의 HTML 문서
  • 하지만 자바스크립트로 여러 페이지를 보여줄 수 있다.
• 클라이언트 사이드 렌더링
  • 웹 브라우저에서 자바스크립트로 HTML 페이지를 만드는 것
    • a 태그 대신 link를 사용한 이유
      • request를 보내지 않고
      • 화면을 렌더링할 수 있다.
• 서버 사이드 렌더링
  • 서버에서 HTML을 만들고 리스폰스로 보내주는 것
    • 훨씬 빨리 화면을 띄어줄 수 있고 SEO에서 좋은 점수를 받을 수 있다는 장점
• 정적 사이트 생성
  • 미리 HTML을 만들어서 서버에서 배포하는 것
  • 데이터가 거의 바뀌지 않는다면 매번 새로 만들 필요가 없기 때문에 유용하다.

렌더링을 활용한 리액트 기술 세 가지

• Next.js
  • 서버 사이드 렌더링을 대신 구현해주는 기술
  • 자바스크립트 파일을 나눠 곧바로 페이지로 사용할 수 있다는 장점
• Gatsby
  • 리액트 코드를 미리 렌더링해서 프로젝트를 빌드할 때 HTML 파일로 만든다.
  • 정적인 회사 소개 사이트 / 동아리 홈페이지 / 포트폴리오 사이트 같이 정적인 사이트를 만드는 경우 추천
• React Native
  • 리액트로 작성한 코드를 모바일 앱으로 만들 수 있게 한다.

리액트로 데이터 다루기

배열 렌더링하기

배열을 렌더링할 땐 key를 기억

• map을 통해 컴포넌트를 만들 때는 고유한 값을 가진 id를 지정해야 한다.
• 배열의 idx는 key로 사용할 수 없음

function ReviewList({ items, onDelete }) {
  return (
    <ul>
      {items.map((item) => {
        return (
          **<li key={item.id}>**
            <ReviewListItem
              item={item}
              onDelete={onDelete}
            />
            <input></input>
          </li>
        );
      })}
    </ul>
  );
}

key를 써야 하는 이유

• 고유하지 않은 값으로 key를 설정하지 않는 경우 렌더링이 잘못 일어날 수 있다.
• 요소마다 고유한 값을 지정하고 나면 결과만 보고도 배열이 어떻게 변화했는 지 이해할 수 있다.
  • 그래서 고유한 값으로 key를 지정하는 것!

데이터 가져오기

fetch 사용하기

<aside> 📄 **Axios와 fetch의 차이 ?

• axios는 사용하기 좀 더 편리하다
• fetch에는 존재하지 않는 기능이 좀 더 많다
• promise based
• axio는 json을 자동으로 적용해서 response 객체를 반환
• axios는 data를 바로 전달
• 요청을 중도 Cancel, 응답시간 초과 설정 등의 기능이 있다.
• fetch는 import가 필요없다.
• 업데이트가 잦은 경우에도 fetch는 걱정 없다.
• request aborting에 대해서 표준적인 방법을 제공해 주지 못한다.
• response timeout API 제공이 되지 않는다.
• error handling 관련 문**

</aside>

useEffect로 초기 데이터 가져오기

• useEffect
  • 함수 실행을 useEffect로 대체해서 초기에 단 한 번 함수를 호출하도록 사용할 수 있다.
  • 무한 루프를 방지하기 위함이다.
• 처음 한 번만 실행하기
• useEffect(() => { // 실행할 코드 }, []);
• 값이 바뀔 때마다 실행하기
• useEffect(() => { // 실행할 코드 }, [dep1, dep2, dep3, ...]);

페이지네이션

• 오프셋 기반 페이지네이션
  • = 상쇄하다
  • = 지금까지 받아온 데잍를 상쇄
  • ex) 20개를 받았으니까 10개 더 보내줘;
  • 개수 기반으로 데이터를 나누는 것.
• 커서 기반 페이지 네이션
  • =데이터를 가리키는 값
  • =지금까지 받은 데이터를 표시한 책갈피
  • 다음 커서 값을 함께 보내 커서 값을 통해 서버에서 페이지를 호출한다.
  ⇒ 오프셋이랑 달리 데이터 중복 없이 호출할 수 있다.

네트워크 로딩 처리하기

• 네트워크를 처리하는 동안 특정 기능을 막아 사용자 경험을 증가시킬 수 있다.
• const handleLoad = async (options) => { let result; try { setIsLoading(true); result = await getReviews(options); } catch (error) { console.error(error); return; } finally { setIsLoading(false); } const { paging, reviews } = result; if (options.offset === 0) { setItems(reviews); } else { setItems((prevItems) => [...prevItems, ...reviews]); } setOffset(options.offset + options.limit); setHasNext(paging.hasNext); };

네트워크 에러 처리하기

const handleLoad = async (options) => {
    let result;
    try {
      setIsLoading(true);
      result = await getReviews(options);
    } catch (error) {
      **setLoadingError(error);**
      return;
    } finally {
      setIsLoading(false);
    }

    const { paging, reviews } = result;
    if (options.offset === 0) {
      setItems(reviews);
    } else {
      setItems((prevItems) => [...prevItems, ...reviews]);
    }
    setOffset(options.offset + options.limit);
    setHasNext(paging.hasNext);
  };

입력 폼 다루기

리액트에서 입력 폼 만들기

<aside> 📄 - JS 에서의 onChange는 사용자가 input을 변경한 후 focus out이 발생할 때 발생

• 리액트에서의 onChange = JS의 onInput과 동일하게 사용(Input값이 변경 시마다)

</aside>

하나의 state로 폼 구현하기

• 여러 가지 state를 객체화해서 하나의 state, 함수로 관리할 수 있다.

const [values, setValues] = useState({ title: "", rating: 0, content: "" });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues((prevValues) => ({
      ...prevValues,
      [name]: value,
    }));
  };

• prevValues를 사용하는 이유는 객체 안의 속성이 여러가지일 때 모든 객체가 함께 전달되기 위함이다!

제어 컴포넌트와 비제어 컴포넌트

• 제어 컴포넌트
  • Controlled Component
  • 인풋의 value값을 리액트에서 지정한다.
  • 리액트에서 사용하는 값과 실제 input 값이 항상 일치해서 주로 권장되는 방법이다.
• 비제어 컴포넌트
  • Uncontrolled Component
  • 인풋의 value값을 리엑트에서 지정하지 않는다.
  → 리액트에서 사용하는 값과 실제 input 값이 다르다.

파일 인풋

• 파일 인풋은 비제어로 만들어져야 한다.

ref로 DOM 노드 가져오기

import { useRef } from "react";

function FileInput({ name, value, onChange }) {
  const inputRef = useRef();

  const handleChange = (e) => {
    const nextValue = e.target.files[0];
    onChange(name, nextValue);
  };

  return (
    <input
      type='file'
      onChange={handleChange}
      ref={inputRef}
    />
  );
}

export default FileInput;

• useRef는 리액트 훅의 한 종류로 특정 DOM 요소에 접근이 가능하다.

사이드 이펙트 정리하기

• useEffect는 리액트 컴포넌트 함수 안에서 사이드 이팩트를 실행하고 싶을 때 사용하는 함수
• useEffect는 사이드 이펙트 생성 후 정리하는 방법도 제공한다.
• 정리 함수를 함께 작성

  useEffect(() => {
    if (!value) return;
    const nextPreview = URL.createObjectURL(value);
    setPreview(nextPreview);

    return () => {
      setPreview();
      URL.revokeObjectURL(nextPreview);
    };
  }, [value]);

데이터 보내기

리액트 Hook

• 어딘가에 걸 수 있는 고리
• 리액트에서 use로 시작하는 메소드들을 hook이라고 한다.
• 내가 작성한 코드를 다른 프로그램에 연결해서 그 값이나 기능을 사용하는 것

리액트 Hook의 규칙

• 리액트 컴포넌트 혹은 커스텀 함수 안에서만 호출될 수 있다.
• 리액트 훅은 반복문 안에서 사용될 수 없다
• 리액트 훅은 렌더링 시 같은 순서대로 사용되어야 한다.

useCallback

• 함수가 매번 바뀌는 문제를 해결하기 위해 사용
  • 함수 생성 X 리액트에서 함수를 기억할 수 있다
  • useCallback의 디펜던시 리스트 값이 바뀔 때만 함수를 새로 만든

전역 데이터 다루기

• Context?
  • 프로그램이 커지면 Props와 state만으로 관리하기 힘들다.
• React Context
  • props를 거치지 않고 쉽게 상태를 전달할 수 있다.

import { createContext, useContext, useState } from "react";

const LocaleContext = createContext();

export function LocaleProvider({ defaultValue = "ko", children }) {
  const [locale, setLocale] = useState(defaultValue);

  return (
    <LocaleContext.Provider value={{ locale, setLocale }}>
      {children}
    </LocaleContext.Provider>
  );
}

export function useLocale() {
  const context = useContext(LocaleContext);

  if (!context) {
    throw new Error("반드시 LocaleProvider 안에서 사용해야 합니다");
  }

  const { locale } = context;

  return locale;
}

export function useSetLocale() {
  const context = useContext(LocaleContext);

  if (!context) {
    throw new Error("반드시 LocaleProvider 안에서 사용해야 합니다");
  }

  const { setLocale } = context;

  return setLocale;
}

상태 관리

• 데이터를 언제 어디서 바뀐 건지도 파악하기 위해 쉬운 상태 관리 구조 필요
• ⇒ 데이터의 변경을 한 곳에서 관리 : Flux
• Flux
• Redux
• React Query
• SWR
• Recoil