React

React] JSX란

JSX const elemnt = Hello, world!위의 태그 문법은 문자열도, HTML도 아닙니다. JSX라 하여 JavaScript를 확장한 문법입니다. JSX는 JavaScript의 모든 기능이 포함되어 있습니다. JSX란? React에서는 렌더링 로직이 UI로직과 연결된다는 사실을 받아들입니다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 "컴포넌트"라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. UI로직 이벤트가 처리되는 방식,시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 JSX에 표현식 포함하기 아래 예시에서는 name이라는 변수를 선언 후 중괄호로 감싸 JSX안에 사용하였습니다. c..

리액트 17버전 이상부터 React를 import 하지 않아도 되는 이유

JSX Transform은 무엇인가? 브라우저는 JSX를 알아듣지 못하기 때문에 대부분의 리액트 사용자는 바벨 또는 타입스크립트와 같은 컴파일러에 의존하여 JSX 코드를 일반 자바스크립트로 변환합니다. CRA 또는 Next.js와 같은 사전 구성된 많은 설정에는 JSX Transform도 포함되어 있습니다. JSX Transform의 달라진 점은? JSX를 사용할 때, 브라우저가 리액트 함수를 이해하도록 컴파일러가 transform 해줍니다. 이전 JSX Transform은 JSX를 React.createElement(...)호출로 변경였습니다. import React from 'react'; function App() { return Hello World; } 이전 JSX버전에서 JS로 변경하는 것은 ..

React] 리액트 Hook

State Hook import React, { useState } from 'react'; function Example() { // count 라는 새 상태 변수를 선언합니다. // count는 단순히 변수명이기 때문에 어떠한 변수명이어도 상관없습니다. const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> 클릭하면 1을 더합니다. ); } //리액트 공식문서의 코드를 참고하였습니다. 위의 예제에서 UseState가 Hook입니다. UseState는 현재의 state값과 이 값을 업데이트하는 함수를 쌍으로 제공합니다. useState는 인자로 초기 state값을 하나 받습니다. 위의 초..

Redux] 리덕스 툴킷에 대해

리덕스 툴킷이란 무엇일까요? 리덕스 툴킷은 리덕스를 더 사용하기 쉽게 만들기 위해 리덕스에서 공식 제공하는 개발도구입니다. Redux 사용 시 문제점 기존 리덕스는 스토어를 구성하는 것이 복잡합니다. 리덕스가 유용해지려면 추가적으로 여러 패키지들이 필요합니다. 한 작업에 필요한 코드 양이 많습니다. 리덕스 툴킷 설치 npm install @reduxjs/toolkit 사용 방법 createSlice 액션과 리듀서를 전부 가지고 있는 Ducks 패턴입니다. createSlice({ name: '액션의 경로를 잡아줄 이름', initialState: [], //액션으로 구분을 준 리듀서 reducers: { //액션을 선언하고 해당 액션이 dispatch되면 state를 가지고 액션을 처리합니다. actio..

TIL] 리액트 기초복습

Component에서의 데이터 관리 state 컴포넌트가 가지고 있는 데이터입니다. 자신의 데이터이기 때문에 마음대로 수정이 가능합니다(삭제, 새로 만들기 가능) 클래스형 컴포넌트에는 state가 존재하지만 함수형 컴포넌트에는 state가 없습니다. 하지만 리액트 훅을 사용하면 함수형에서도 state가 사용 가능합니다 props 부모에게 받아온 데이터입니다. 부모에게 받아온 데이터이기 때문에 생성, 수정, 삭제가 불가능합니다. 더욱 자세한 내용은 아래에서 알아보도록 하겠습니다! 라이프 사이클 DOM DOM은 html 단위 하나하나를 객체로 생성하는 모델이며 트리구조로 이루어져 있습니다. DOM은 트리 구조이기 때문에 하나가 수정될 때 수정할 것을 찾고 전부 수정하게 된다면 쓸데없는 연산이 너무 많이 일어..

TIL] props와 state

state state는 컴포넌트가 가지고 있는 데이터이고 props는 컴포넌트가 부모 컴포넌트로부터 받아온 데이터입니다! state는 한 컴포넌트에서만 사용하는 정보를 주로 넣어놓고 수정하는 데이터이며, 생성도 수정도 오직 컴포넌트 내에서만 이루어집니다! props props는 컴포넌트가 부모 컴포넌트로부터 받아온 데이터입니다! props의 데이터는 부모 컴포넌트로 받아온 것이기 때문에 읽기 전용이라고 생각하시면 편합니다. 상속받은 컴포넌트 내에서 수정이 불가능한 이유는 무엇일까요? 리액트에서는 부모 > 자식의 단방향성 데이터흐름이라는 특징 때문입니다! 만약 props의 데이터를 변경한다고 하면 부모 컴포넌트에서 변경을 하셔야 합니다! 오늘은 리액트 심화 강의를 들었습니다! 로그인을 하여 세션이 존재할 ..

TIL] Prototype

자바 스크립트 자바스크립트는 동적 언어이며 클래스가 없는 언어입니다! 자바스크립트에서의 클래스는 클래스 기반 언어가 말하는 클래스를 자바스크립트가 흉내 낸 것입니다. 자바스크립트의 클래스는 ES6부터 지원하는 키워드입니다! 자바스크립트는 프로토타입 기반 동적언어입니다.! 클래스 기반 언어와의 차이점은 클래스 기반 언어 같은 경우 클래스를 정의하고 이를 통해 객체를 생성하는데 반면 자바스크립트는 클래스 없이 객체를 생성할 수 있습니다. Prototype 자바스크립트의 모든 객체는 자신의 부모 객체의 원형과 연결되어있습니다. 객체 지향에서의 상속 개념처럼 부모 객체의 프로퍼티나 메서드를 상속받아 쓸 수 있지만 이것은 실제로는 상속보다 위임에 가깝습니다! 이러한 부모 객체를 프로토타입 객체, 혹은 그냥 프로토..

TIL] 라이프사이클 복습

라이플 사이클은 전에 공부를 하고 TIL에 포스팅을 한 적이 있지만 아직 이해도가 부족한 것 같아 오늘 복습을 했습니다. 라이플 사이클이란 트리구조인 DOM 트리 중 하나가 수정될 때마다 모든 DOM을 뒤지고 수정할걸 찾고 수정을 하면 필요없는 연산이 너무 많이 일어나기 때문에 가상 돔이 등장하게 되는데 가상 돔은 메모리 상에서 돌아가는 가짜 DOM입니다. 가상 돔 가상 돔의 동작 방식에 대해 살펴보자면 기존 돔과 어떠한 행동 후 새로 그린 돔을 비교해서 바뀐 부분을 갈아 끼워주기 때문에 돔 업데이터 처리가 간결해집니다. 하지만 그렇다고해서 가상 돔이 일반적인 돔보다 성능이 좋다고 말할 순 없습니다. 돔은 사이트 구조에 따라 가상 돔을 쓰는 것보다 성능이 좋을 수도 나쁠 수도 있기 때문에 상황에 따라서 ..

TIL] 스타일 컴포넌트

스타일 컴포넌트 스타일 컴포넌트는 컴포넌트 스타일링 기법 중 하나입니다. 스타일 컴포는 터는 CSS-in-JS 라이브러리 중 하나이며 컴포넌트에 스타일을 직접 입히는 방식이라고 생각하시면 됩니다! 스타일 컴포넌트의 장점 스타일 컴포넌트를 사용하면 클래스 이름을 짓지 않아도 괜찮습니다. 또한 컴포넌트에 스타일을 적기 때문에 간단하면서 직관적입니다. 스타일 컴포넌트 패키지 설치하기 yarn add styled-components 위의 코드를 입력하시면 패키지가 설치됩니다. 패키지를 설치하시고 임포트를 해주시면 됩니다. import styled from 'styled-components'; 스타일 컴포넌트 사용하기 const Example = styled.div` display: flex; flex-direc..

TIL] Switch

라우터 스위치는 라우터의 내장된 컴포넌트 종류 중 하나입니다! 스위치를 알기 전에 라우터를 먼저 알아보았습니다! 라우터는 path속성으로 자신이 원하는 URL 주소를 만들고 해당 URL에 들어갈 컴포넌트를 지정할 수 있기 때문에 브라우저 이동 없이 컴포넌트만 바꿔서 새 로고 침 없이 페이지 전환이 가능합니다. 싱글 페이지 애플리케이션은 새로고침을 하지 않고 컴포넌트만 바꾸기 때문에 싱글 페이지 애플리케이션이 어떻게 새로운 페이지를 그려주는지 알게 되었습니다! 바로 라우터를 통해 그려줍니다! Switch 스위치는 라우터로 생성된 자식 컴포넌트 중 매칭 되는 첫 번째 라우터를 렌더링 해줍니다. 통상적으로 메인 라우트의 경로를 "/"로 지정하고 다른 라우터에는 "/nerd" 이런 식으로 지정하는 경우가 많은데..