Web/react
[리액트] Hooks 알아보기
useState 상태(state) 관리를 위한 Hook. 함수형 컴포넌트에서 상태 변수와 해당 상태를 업데이트하는 함수를 제공한다. 컴포넌트의 상태를 변경하고, 변경된 상태를 화면에 렌더링할 수 있다. import React, { useState } from "react"; const Counter = () => { //count: 변수, setCount: 상태 업데이트 하는 함수 //=> 배열 비구조화 할당을 통해 각각의 값을 추출해서 사용 const [count, setCount] = useState(0); const increment = () => { setCount(counst + 1); }; return ( Count: {count} Increment ); }; useEffect 생명주기(lif..
[리액트] Redux Toolkit 사용해서 Counter 만들기
패키지 설치 # Yarn # redux 관련 yarn add react-redux @reduxjs/toolkit redux-devtools-extension # 추가 패키지 yarn add react-router-dom sass styled-components 패키지 이름 설명 react-redux 리액트에서 redux를 사용할 수 있도록 해주는 컨테이너. redux에 의존한다. @reduxjs/toolkit 리액트에서 리덕스를 좀 더 간결하게 사용할 수 있도록 하는 최신 패키지 redux-devtools-extension 리덕스의 상태를 크롬브라우저 개발자도구에 설치된 확장 기능과 연동할 수 있게 해주는 미들웨어 react-router-dom SPA앱을 만들 때 사용. URL에 따라 실행할 Javasc..
[리액트] 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..
[리액트] Components
🎀 Components 개념적으로 컴포넌트는 JavaScript 함수와 유사하다. React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달한다. 이 객체를 "props"라고 한다. 처음에는 컴포넌트를 추출하는 작업이 지루해 보일 수 있지만, 재사용 가능한 컴포넌트를 만들어 놓는 것은 더 큰 앱에서 작업할 때 두각을 나타낸다. UI 일부가 여러 번 사용되거나(Button, Panel, Avatar), UI 일부가 자체적으로 복잡한(App, FeedStory, Comment) 경우에는 별도의 컴포넌트로 만드는 게 좋다. 😚 컴포넌트의 이름은 항상 대문자로 시작한다. React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리한다. 예를 들어 ..
[리액트] JSX 문법
🎀 JSX 란? JavaScript를 확장한 문법이다. React에서는 본직적으로 렌더링 로직이 UI로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들인다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 "컴포넌트"라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다. 관신사의 분리 : 컴퓨터 과학에서 관심사 분리는 컴퓨터 프로그램을 별개의 섹션으로 분리 하기 위한 설계 원칙이다. React는 JSX 사용이 필수는 아니다. 🎈 JSX에 표현식 포함하기 const name = 'Josh Perez'; const element = Hello, {name}; fu..
[리액트] Router
리액트는 SPA(Single Page Application) 방식 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태이다. 1) Router 분배하는 기능을 수행하는 소프트웨어나 하드웨어 대표적인 라우터로는 아이피공유기가 있다. React의 Router는 URL에 의해 컴포넌트를 분배하는 기능을 한다. HTML5에서 Javascript에 추가된 기능중 history객체를 통해 URL을 변조하는 기능이 있다. 리액트의 Router는 이 기능을 활용하여 현재 페이지의 URL을 다양하게 변조하여 거기에 각각의 컴포넌트를 분배한다. 2) SPA 개발의 장점 페이지 이동 없이 JS에 의해 화면이 갱신되므로 실제로 네트워크 통신이 발생하지 않아 실행 속도가 빠르다. 3) SPA 개발의..
[리액트] 시작하기
개발환경 구성하기 1) Node.js 설치확인 window 명령프롬프트 실행 : Winkey + R > cmd (엔터) 명령어 수행 : node --version MacOS 터미널 실행 : cmd + space > terminal (엔터) 명령어 수행 : node --version 결과값이 출력되지 않을 경우 설치 설치하기 https://nodejs.org 에서 프로그램 내려받아 설치. 대부분의 경우 LTS 버전 권장. Mac M1 버전의 경우 17 이상 버전 필요함. 설치 완료 후 열어두었던 명령프롬프트나 터미널을 종료하고 재시작. 앞서 수행한 버전확인 명령어를 통해 설치 완료 확인. 2) yarn npm install -g yarn 3) visual studio code 작업시 도움되는 extensi..
[React] 리액트 작업환경 준비하기
* window환경입니다. * 다운받을 프로그램들 Node.js 다운받기 10.16.0 LTS를 다운받는다. Yarn 다운받기 npm에 이미 익숙하다면 생략가능 git for windows 다운받기 node 생성할 때 사용 VS Code 다운받기 에디터 프로그램. * 새 프로젝트 만들어보기 git Bash를 열어서 다음 명령어를 입력한다. $ npx create-react-app begin-react 입력하고 좀 기다리면 begin-react라는 디렉터리가 생기고 그 안에 리액트 프로젝트가 생성된다. 생성이 끝나면 cs 명령어를 사용하여 해당 디렉터리에 들어간 다음 yarn start 명령어를 입력한다. $ cd begin-react $ yarn start 그러면 http://localhost:3000/..