전체 글

[리액트] Redux

1. Redux? 리액트 전역 상태 관리 라이브러리 여러개의 컴포넌트가 개별적으로 관리하는 상태값들을 하나의 파일에 모아서 통합 관리하는 것이 목적 컴포넌트끼리 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트 할 수 있다. React나 다른 뷰 라이브러리와 함께 사용할 수 있다. 2. Redux 기본 요소 Slice 리덕스에서 관리하고자 하는 상태값과 상태값 갱신 기능을 포함하는 단위 모듈 상태값 - 리덕스를 통해 관리하고자 하는 전역 상태값 리듀서 - 상태값을 갱신하기 위한 함수(=액션함수)들을 포함하고 있는 모듈 액션함수 - 리듀서에 포함된 메서드들로서 상태값을 갱신하는 역할을 수행한다. Store Slice를 저장하고 있는 통합 모듈 이 모듈을 ReactA..

[리액트] export와 export default의 차이

리액트에서 export와 export default는 모듈을 내보내는 데 사용되는 키워드이다. 이 두 키워드를 JavaScript 모듈 시스템에서 사용되며, 다른 파일에서 해당 모듈을 가져와 사용할 수 있도록 한다. export 👉 import 시 { 함수이름 } ~ 로 불러온다. export default 👉 import 시 { } 가 필요없다. export export는 모듈에서 특정한 요소(함수, 변수, 클래스 등)를 내보내는 역할을 한다. export 키워드를 사용하여 특정 요소를 내보내면, 해당 요소는 다른 파일에서 import 키워드를 사용하여 가져올 수 있다. export는 여러 개의 요소를 동시에 내보낼 수 있으며, 내보낸 요소들은 이름을 가지고 있어야 한다. 이러한 요소들은 가져올 때 동..

[리액트] Props

🎀 Props properties의 줄임말 props는 읽기 전용이다. 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다. 아래와 같은 함수들은 순수 함수라고 호칭한다. 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과 값을 반환하기 때문이다. function sum(a, b) { return a + b; } 반면에 다음 함수는 자신의 입력값을 변경하기 때문에 순수 함수가 아니다. function withdraw(account, amount) { account.total -= amount; } 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용한다. props 어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용 App.js impor..

[자바스크립트] axios

Axios 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)애서는 XMLHttpRequest를 사용한다. 특징 브라우저를 위해 XMLHttpRequests생성 node.js를 위해 http 요청 생성 Promise API를 지원 요청 및 응답 인터셉트 요청 및 응답 데이터 변환 요청 취소 JSON 데이터 자동 변환 XSRF를 막기위한 클라이언트 사이트 지원 XMLHttpRequests(XHR) XHR 객체는 서버와 상호작용할 때 사용한다. XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터는 가져올 수 있다. 이를 활용하면 사용자의 작업을 방해하지 않고 페이지의..

[리액트] Components

🎀 Components 개념적으로 컴포넌트는 JavaScript 함수와 유사하다. React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달한다. 이 객체를 "props"라고 한다. 처음에는 컴포넌트를 추출하는 작업이 지루해 보일 수 있지만, 재사용 가능한 컴포넌트를 만들어 놓는 것은 더 큰 앱에서 작업할 때 두각을 나타낸다. UI 일부가 여러 번 사용되거나(Button, Panel, Avatar), UI 일부가 자체적으로 복잡한(App, FeedStory, Comment) 경우에는 별도의 컴포넌트로 만드는 게 좋다. 😚 컴포넌트의 이름은 항상 대문자로 시작한다. React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리한다. 예를 들어 ..