All

[React] useEffect와 Side Effect

Rendering in React React에서 함수 컴포넌트의 rendering이란 state, props를 기반으로 UI 요소를 그려내는 행위 렌더링의 결과물은 UI 요소, 즉, 화면에 JSX 문법으로 무엇이 나타날지를 적어둔 컴포넌트들 그러한 렌더링 결과물에 영향을 주는 요소가 state와 props Side Effect Side Effect는 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위를 말한다. 즉, React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들이라고 볼 수 있다 코드 예시 let count = 0 function greetWithSideEffect(name) { // Input count = count + 1 // Side ..

[React] map 함수 적용시 key props를 부여하는 이유

Key React에선 기존에 한땀한땀 작성해야했던 배열을 map()이라는 함수를 이용해 element list로 반복 실행할 수 있다 key는 react가 어떤 항목을 변경, 추가 , 삭제할지 식별하며 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트로 지정해야 한다. 왜 필요할까? 위에서 언급했던 map이라는 함수로 요소를 하나하나 뿌려준다고 가정하자 리액트는 내용이 바뀔 때 즉, state값이 바뀔 때 마다 다시 랜더링을 하는데 10개의 리스트 중에 하나의 리스트만 바뀌었다면 리액트가 하나씩 리스트를 읽다가 어디서 달라졌는지 파악하고 전체를 재렌더링 한다. 그걸 방지하기 위해 각각의 요소들이 고유한 정체성을 가지도록 key값을 부여하는 것이다 그러면 리액트는 key값으로 변한 내용인지,..

[React] Hooks

Hooks Hooks은 리액트 v16.8에 새로 도입된 기능으로 함수 형태의 컴포넌트에서 사용되는 몇 가지 기술을 Hook이라 부른다 Hooks은 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState & 렌더링 직후 작업을 설정하는 useEffect등의 기능 등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. 만일 앱을 react hook을 사용하여 만든다면 class component. render 등을 안 해도 된다는 뜻이다 즉, 모든 것은 하나의 function 함수형 프로그래밍이 가능해진다는 것이다 Why?? 왜 굳이?? 굳이 잘 쓰고 있던 클래스형 컴포넌트를 함수형 컴포넌트로 바꾸는 이유는 클래스는 react를 배우는 데에 있어서 큰 진입장벽이었다..

[SCSS] SCSS는 무엇인가?

SCSS CSS는 HMTL 태그를 꾸미거나 효과를 넣어 주는 등 디자인 요소를 추가할 때 사용하는 전처리 과정이다. 하지만 프로젝트 규모가 커지거나 작업이 고도화될수록CSS는 불가피하게 가독성이 떨어지는 등 유지보수의 어려움을 주는 요소가 된다코드의 재사용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 개념이 SASS / SCSS라고 한다 CSS의 태생적 한계를 보완하기 위해 Sass는 유용한 도구들을 제공한다 변수의 사용 조건문과 반복문 Import Nesting Mixin Extend/Inheritance 설치방법 npm i sass --save yarn add sass Sass와 SCSS 차이 Sass (Syntactically Awesome ..

[React] Props & State

State State란 말 그대로 컴포넌트의 상태 값이다 State와 Props는 둘 다 object 이거, 화면에 보여줄 정보 즉, 상태를 가지고 있다는 점에서 서로 비슷한 역할을 한다. props는 컴포넌트를 사용하는 부모쪽에서 전달해야만 사용할 수 있고 (함수의 parameter 처럼) 읽기전용이다. state는 컴포넌트 내에서 정의하고 사용하며 업데이트 할 수 있다 state는 변수 대신 쓸 수 있는 데이터 저장공간이다. useState()를 이용해 사용해야한다 useState[a,b]에서 a는 state 데이터, b는 state 데이터 변경 함수이다 state에 데이터를 저장해놓는 이유 웹이 앱처럼 동작하게 만들고 싶어서 state는 변경되면 HTML이 자동으로 재렌더링 된다 HTML이 새로고침..

[React] Component

Component (컴포넌트) 재사용 가능한 각각의 독립된 모듈 재사용 가능한 UI 구성 단위 동일 코드가 반복되는 부분을 하나의 component로 만들어 같은 디자인의 input이 필요한 곳마다 재사용할 수가 있으며, 컴포넌트를 하나만 만들고 여기저기서 재사용하면, 디자인이 바꼈을 때 css 한줄만 수정하면 바뀐 디자인이 모두 반영될 것이다 컴포넌트는 독립적으로, 재사용 가능한 코드로 관리할 수 있다. 하나의 컴포넌트에 필요한 html, css, js(모듈)를 모두 합쳐서 만들 수 있다 컴포넌트는 함수랑 비슷하다. 함수도 기능이 독립적이고 한 번 선언해 두면 필요할 때 마다 호출하면서 재사용하기 때문이다. React 컴포넌트에서는 input을 props라고 말하고 return은 화면에 보여져야할 Re..

[React] React?

Why React? 2013년 Facebook에서 개발한 JavaScript Library “지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하는 것"을 목푤로 개발 Angular, Vue 등의 다른 프레임워크와는 달리 리액트는 오로지 View만 담당하는 라이브러리 그만큼 내장되어 있는 기능이 부족해 third-party 라이브러리 (ex. react-router-dom, redux)를 함께 사용한다 자기만의 문법을 가진 Angular, Vue와 달리 자바스크립트 문법을 그대로 사용 오픈소스 프로젝트이면서 페이스북의 지속적인 관리가 이루어지고 있음 많은 사용자수를 기반으로 생태계가 활성화 되어있음 컴포넌트를 비교적 더 단순하고 간단하게 정의할 수 있음 React Navtive 등의 웹이 아닌 플랫폼에..

[GIT] Git이란?

GIT(깃)은 2005년 리누스 토르발스에 의해 개발된 ‘분산 버전관리 시스템(Distributed Version Control Systems)으로, 원래는 Linux 소스코드를 관리할 목적으로 만들어졌지만 컴퓨터 파일의 변경사항을 추적하고 여러 사용자들 간에 해당 파일 작업을 조율하기 위한 대표적인 버전 관리 시스템(VCS)이다 즉, 주로 여러명의 개발자가 하나의 소프트웨어 개발 프로젝트에 참여할 때, 소스 코드를 관리하는데 사용된다 버전관리가 왜 필요한가 보면은, 각 버전의 파일을 복사, 저장, 백업하는 버전 관리의 하나의 방법이가도 하지만, 어느것이 가장 최근의 파일인지 보기 어렵고 비효율적인 문제가 있기 때문에 버전관리를 통해 각 파트별로 만든 파일을 본 파일에 합치는 과정을 돕는 시스템이다 SV..

[JavaScript] Map Object (맵)

자바스크립트에서 map은 두 가지이다 1. Array.prototype.map() : 특정 배열 내 모든 요소에 대해 각각 함수를 적용하고, 새로운 배열로 만들어서 반환한다. 이때 원본 배열에는 영향을 주지 않는다 2. Map : Java의 HashMap와 같은 key:value로 이루어진 자료구조 자바스크립트를 공부하다가 Map이 Java와는 다른 걸 느꼈다. Java에서 Map 객체는 키-값을 쌍으로 저장하며 각 쌍의 삽입 순서도 기억하는 콜렉션이다. 아무 값이라도 키와 값으로 사용할 수 있다. 즉, key:value 형식으로 저장되며, key 값을 사용하여 해당 key에 맞는 value값을 가져올 수 있다 let max = new Map(); // set으로 맵 객체에 삽입 max.set("id",..

[JavaScript] Replit (21-25)

[과제 21] 날짜와 시간 Assignment 미국을 비롯해 전세계 대부분의 나라들이 생일을 기준으로 나이를 계산 합니다. 쉽게 말해 미국은 태어나자마자 0살이고 생일을 지나야 비로소 한 살이 됩니다. 반면에 한국은 태어나자마자 1살이고 연도가 바뀔 때마다 한 살씩 먹습니다. 예를 들어 미국에서는 1995년 9월 12일에 태어났으면 1995년 9월 12일에는 0살이고 1996년 9월 12일이 되야 1살이 됩니다. 그에 비해 한국에서는 1995년 9월 12일에 태어나자마자 1살이고 1996년 1월 1일에 2살이 됩니다. 1살 차이도 크게 생각하는 우리나라 고유의 문화에 비롯한 계산법이 아닌가 추측해 봅니다. 미국이나 다른 나라가 사용하는 나이 계산법은 우리나라에서는 만 나이 라고 하죠. 앞서 말한 만으로 ..