[React] 상태 관리 도구(State Management Tools)의 필요성
2022. 10. 12. 14:32
공부/리액트 (React)
1. 상태 관리 도구(State Management Tools)란? 상태 관리 도구가 왜 필요할까? 👉 먼저 상태란? React에서 State는 component 안에서 관리되는 것이다. 아래는 Class component 상태 관리 예시이다. class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; // 여기서 관리 } render() { return ( Hello World! It's {this.state.data.toLocaleTimeString()}. ); } } 👉 Component 간의 정보 공유 자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능 하다. 자식 컴..
[JavaScript] 옵셔널 체이닝
2022. 10. 12. 12:26
공부/자바스크립트 (JavaScript)
옵셔널 체이닝(Optional Chaning) 자바스크립트에서 존재하지 않는 요소에 접근하려 할 때 에러가 발생할 수 있습니다. 그래서 옵셔널 체이닝이 등장하기 전에는 AND 연산자의 단축평가를 이용해 이를 해결할 수 있었습니다. let users = {} console.log(users && users.user && users.user.name) undefined 하지만 이 경우에 체이닝이 길어지면 길어질수록 코드의 복잡성이 증가한다는 단점이 있습니다. 그래서 이를 해결하기 위해 ES2020 부터 옵셔널 체이닝이 추가되었습니다. 옵셔널 체이닝(?.)은 체이닝(.)과 동일한 기능을 하는데 차이점은 옵셔널 체이닝은 nullish한(null or undefined) 값을 할당하고 있는 경우에 에러를 반환하지..
리액트 초기 설정
2022. 10. 10. 19:16
공부/리액트 (React)
1. CRA로 프로젝트 생성하기 리액트 프로젝트 설치하고 싶은곳까지 터미널로 이동 후 입력 ls cd 폴더이름 yarn create react-app 프로젝트 #프로젝트 생성 2. yarn 에서 styled-components 설치하기 yarn add styled-components 3. 리덕스 설치 yarn add redux react-redux 아래와 같은 의미 yarn add redux yarn add react-redux 리덕스 툴킷 설치 yarn add @reduxjs/toolkit 4. 폴더 구조 생성하기 이미지와 같이 폴더 구조를 생성 src 폴더 안에 redux 폴더를 생성 redux 폴더 안에 config, modules 폴더를 생성 config 폴더 안에 configStore.js파일을..
[WIL] 10월 첫째주
2022. 10. 9. 19:42
공부/스파르타코딩클럽
React 프로젝트 생성 yarn create react-app newproject #프로젝트 생성! 리액트의 좋은점은 UI에서 바뀐 부분만 업데이트 해줌 변경된 부분만 업데이트된다는게 왜 좋은걸까? 리액트가 아닌 경우, 일반 자바스크립트를 쓴 브라우저는 노드정보가 바뀔때마다 노드트리를 처음부터 다시 생성한다. 5단계에 걸쳐서. 근데 리액트는 가상돔을 써서 우리 시야에 보이는 부분만 수정해서 보여주고 모든 업뎃이 끝나면 일괄로 합쳐서 실제 돔에 던져준다고 한다. 브라우저 작동원리와 연관있다. 프엔은 이 렌더트리 단계를 얼마나 최적화하는가가 중요하다. 변수를 JSX에 전달하는 방법 let counter = 0; 변수를 만들고 Total clicks: {counter} 로 만들어주면 변수의 카운터 숫자에 따..
React에서 렌더링이란 무엇일까? +DOM
2022. 10. 5. 20:46
공부/리액트 (React)
렌더링이란? 사용자 화면에 View(내용)를 보여 주는 것을 렌더링이라고 한다. 그렇다면 리액트 라이브러리는 뷰(View)를 어떻게 렌더링 하길래 데이터가 변할 때마다 새롭게 리 렌더링 하면서 성능을 아끼고, 최적의 사용자 경험을 제공할 수 있을까?? 이것의 해답은 바로 초기 렌더링과 리렌더링에 있다. 초기 렌더링 리액트는 맨 처음 어떻게 화면에 보여질 지를 다루는 render() 함수가 존재한다. 이 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다. render() 특징 render() 함수는 html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 동작하는지에 대한 정보를 지닌 객체를 반환한다. 또, 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있어, render 함수가 실행되..
SPA vs MPA
2022. 10. 5. 12:59
공부/리액트 (React)
SPA (Single Page Application) 이란? SPA(Single Page Application)는 한 개(Single)의 Page로 구성된 Application이다. 반면 SPA는 웹 에플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드한다. 그 이후 새로운 페이지 요청이 있을 때, 페이지 갱신에 필요한 데이터만 전달 받아서 페이지를 갱신한다. 그래서 SPA를 CSR(Client Side Rendering) 방식으로 렌더링한다고 말한다. 즉, 웹 사이트의 전체 페이지를 하나의 페이지 담아, 서버로부터 새로운 페이지를 불러오지 않고, 화면을 동적으로 표현하는 것을 웹 사이트나 웹 애플리케이션을 SPA 라고 한다. 이를 클라이언트 관점에서 말하자면 최초 페이지를 로딩한 시점부터는 ..
[WIL] JavaScript의 ES란?, ES5/ES6 문법 차이
2022. 10. 2. 21:07
공부/자바스크립트 (JavaScript)
❓ ES는 무엇인가 ES는 ECMAScript의 약자입니다. 그리고 숫자 6은 여섯 번째 ES라고 생각하면 되겠습니다. 그렇다면 ES, ECMAScript는 무엇일까요? 위키백과를 보면 ECMAScript 는 Ecma 인터내셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어입니다. 자바스크립트를 표준화하기 위해서 만들어졌으며 꼭 자바스크립트가 아니더라도 어도비 플래시를 사용하는 소프트웨어에서 사용하는 액션스크립트, MS 사의 인터넷 익스플로러에 쓰이는 J스크립트 등 다른 구현체들 역시 포함하고 있습니다. ES 가 등장하게 된 배경을 살펴보면 1990년대로 거슬러 올라갑니다. Netscape 회사는 웹 디자이너들과 파트 타입 프로그래머들이 이미지, 플러그인 등의 요소를 쉽게 조합해..
최솟값 구하기
2022. 9. 25. 20:10
공부/알고리즘 공부
❓ 문제설명 길이가 서로 다른 A, B, C 세 개의 막대 길이가 주어지면 이 세 막대로 삼각형을 만들 수 있으면 “YES"를 출력하고, 만들 수 없으면 ”NO"를 출력한다. ❓ 입력설명 첫 번째 줄에 100이하의 서로 다른 A, B, C 막대의 길이가 주어진다. ❓ 출력설명 첫 번째 줄에 “YES", "NO"를 출력한다. 💡 풀이