화성갈끄니까아

리엑트는 SPA (Single Page Application) 한 개의 페이지로 이루어진 어플리케이션이기에 다른 페이지로 이동할 때 서버에 새로운 페이지를 요청하는게 아니라, 새로운 페이지에서 필요한 데이터만 받아 새로운 뷰를 만들어 사용자에게 보여주게 된다. 따라서 라우팅(Routing)이라는 기능을 사용하게 되는데 이번에는 기본적인 라우팅 외 path parameter / query parameter에 대해서 알아보자! 정적 라우팅(Static Routing) vs 동적 라우팅(Dynamic Routing) 1. 정적 라우팅 정적 라우팅과 동적 라우팅에 관해 배우면서 이때까지 내가 사용했던 라우팅 방법은 정적 라우팅이라는 것을 알았다. 정적 라우팅은 쉽게 경로가 완전히 정해진 경우 사용되는 방법으로 ..

Side Effect useEffect를 알아보기 전에 부작용(Side Effect) 먼저 알아보자. 부작용은 일반적으로 부정적인 의미로 사용된다. 하지만 프로그래밍 측면에서는 부수적인 작용이라는 의미로 사용되기 때문에 오해하지 않도록 한다. let count = 0; function greetWithSideEffect(name) { count = count + 1 // Side Effect return `${name}님 안녕하세요!` // output } 다음과 같은 코드는 부작용(Side Effect)이 존재한다라고 말할 수 있다. 외부에 있는 코드를 접근하거나 수정, 읽는 경우 부작용(Side Effect)이 있는 코드가 되는 것이다. sideEffect는 랜더링을 막기(block)때문에 랜더링을 ..

map 함수를 왜 사용할까? 반복되는 데이터에 대해서 for문을 사용해도 되는데 사용하지 못하는건가? 리엑트의 jsx에서는 if문과 같이 for문도 사용할 수 없다. 따라서 리엑트에서 반복문을 사용하려면 map함수를 쓸 수 밖에 없다...! * if문도 불가능하기 때문에 삼항연산자를 사용해요! map 함수의 기본 구조 배열.map(callback함수, index) callback함수는 새로운 배열의 요소를 생성하고 index는 현재 처리하고 있는 요소의 값을 뜻한다. 배열.map(function(a, index)) a의 역할은 배열의 원소 하나 하나씩 접근한다. index는 반복문이 실행될 때 마다 0부터 1씩 증가하는 정수이다. const str = ['a','b','c','d','e'] const m..

State와 Props를 알기 전에 Hook에 대하여 먼저 알아보자! React Hooks 리엑트 v16.8부터 새롭게 도입된 기능으로써 과거에는 클래스형 컴포넌트를 사용하였다. 클래스의 사용은 코드의 재사용과 구성을 어렵게 만들었으며 Reloading의 신뢰성을 떨어뜨리는 단점이 존재하였다. 따라서 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있는 훅이 탄생하였으며 대표적으로 useState와 useEffect를 사용하여 lifecycle과 연동 같은 기능을 사용 가능하게 함으로써 리엑트에서 가장 중요한 기능 중 하나가 되었다. Before Using Hooks 훅은 함수 컴포넌트 내에서 항상 최상단에 호출해야 한다. 리엑트 함수 컴포넌트 내에서만 훅을 호출해야하며, 일반 자바스크립트 함수에..

Saas란? 웹 디자인 공부를 시작하다보면 CSS는 흔히 접하고 있을 것이다. CSS 코드가 길어질수록 복잡해지며 수정작업이 필요할 경우 매우 불편하다는 점이 있다. 동일한 코드를 재사용 하려면 복사/붙여넣기의 방법 뿐이며 실수를 유발할 수 있는 가능성이 아주 높은 단점이다. 따라서 Saas는 이를 보완하기 위하여 탄생하였다. Saas는 컴파일 과정에서 CSS파일을 생성해주는 전처리기 역활로써, 안정적이고 확장성이 좋은 특징을 가지고 있다. Saas 사용 다음 명령어를 통해 Saas를 우선 설치해주자 npm install sass * 설치 명령어를 입력한 뒤 항상 package.json파일에서 설치가 되었는지 확인하자! CSS파일의 확장자를 .scss로 변경하자 -> 아이콘이 바뀌는 것을 발견할 것이다...

라우팅(Routing)? 라우팅은 경로에 따라 다른 화면을 보여주는 것이다. 리엑트는 단일 페이지(SPA) 형식이기 때문에 여러 개의 페이지를 보여주기 위해선 다른 페이지로의 이동이 계속해서 필요한 것이다. 리엑트에는 이러한 기능이 없기 때문에 라우터를 따로 설치해야 한다! 이러한 점에서 확실히 리엑트는 프레임워크가 아닌 라이브러리라는 것을 알 수 있다! 리엑터 라우터? 앞서 언급하였듯이 라우팅을 위해서 리엑터 라우터를 설치해주자! 다음 예시와 같은 명령어로 리엑터 라우터 설치가 가능하다. 라우터 컴포넌트 연결 라우터 컴포넌트 구성은 다음과 같다. 사용되지 않은 컴포넌트는 주석처리 하였다. index.html에서 화면을 보여주고 있는 js파일에 컴포넌트 사용과 동일한 방법으로 을 하게되면 라우터가 가리키..

JSX란? 리엑트에서 사용하는 문법으로써 자바스크립트의 확장 문법이다. 리엑트로 웹 개발하기 위해서는 JSX에 익숙해지자! JSX 기본 문법 JSX를 작성하는 경우에는 반드시 하나의 요소로 감싸주어야 한다. div를 만들어 부모태그를 생성할 수 있지만 div태그가 무분별하게 생성되면 시멘틱 웹으로써의 의미가 떨어지기 때문에 or 를 사용하여 부모태그를 대신해주자. (최상단에 부모태그가 존재할 경우 굳이 사용할 필요는 없다.) 셀프 클로징(self-closing) HTML을 사용하였을 때는 input, br ,img와 같이 닫는 태그가 없는 태그들이 있지만 JSX에서는 반드시 닫아줘야한다. 이를 셀프 클로징이라고 부른다. 속성명 카멜 케이스(Camel Case) 표기법으로 작성 HTML 속성들인 oncli..