JS' 공부흔적

표현식 표현식이란 값으로 평가될 수 있는 것을 말하는데, 쉽게 구분하는 방법은 변수에 할당해보면 된다. 표현식은 값으로 평가되기 때문에 변수에 할당이 가능하다. var x; //표현식 x -> var a = var x;는 사용할 수 없으므로 x = 1 + 2; // 표현식 o -> x = 1 + 2;로 이미 변수에 할당되어 있으므로 또한 크롬 개발자 도구에서도 쉽게 확인할 수 있는데, 개발자 도구에서 표현식을 실행하면 값이 출력되고, 표현식이 아닌 것을 실행하면 undefined를 출력한다.

모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 크게 3가지로 분류할 수 있는데, 마운트, 업데이트, 언마운트가 그 3가지이다. 마운트는 컴포넌트가 생성되고 DOM이 업데이트되어 웹 브라우저 상에 나타나는 것이다. 업데이트는 말 그대로 컴포넌트를 업데이트하는 것이다. 언마운트는 마운트의 반대 개념으로, 컴포넌트를 DOM에서 제거하는 것이다. 총 9가지가 있는데 참고로 이는 클래스형 컴포넌트에서만 사용이 가능하다. 함수 컴포넌트에서는 Hooks를 사용한다. 오늘은 클래스형 컴포넌트에서 쓰이는 라이프사이클 메서드 9가지를 알아보자. 1. render() 최종적으로 작업한 UI를 렌더링하는, 즉 리액트 요소를 반환하는 메서드이다. 따라서 라이프사이클 메서드 중 유일하게 필수 메서드이다. rend..

이전 글에 이어서 이번에는 createReducer에 대해 작성하겠다. 이전 글에서 다뤘던 createAction은 Redux의 action을 간편하게 만들 수 있는 것이었다면, createReducer도 마찬가지로 reducer를 간편하게 만들 수 있는 방법이다. createReducer TodoList 코드를 기준으로 보면 기존의 reducer를 생성하는 방법은 아래와 같다. const reducer = (state = [], action) => { switch (action.type) { case addTodo.type: return [...state, { text: action.payload, id: Date.now() }] case deleteTodo.type: return state.filte..

오늘의집 클론코딩 프로젝트를 진행하는 도중에 mainColor를 전역 변수로 사용해야함을 느꼈다. 이전에 React Native 프로젝트에서는 Context API를 사용하여 전역 변수를 사용했고, 이번에는 Redux를 사용하여 상태 관리를 하기로 했기 때문에 처음에는 Redux에 전역 변수를 저장해야겠다고 생각했다. 그래서 Redux 내에 initialState에 변수를 선언해놓고 이것을 각 페이지에서 useSelector로 불러온 후, 해당 변수를 styled-components에 props로 전달해주었다. 페이지가 많아지다보니 이러한 작업이 번거롭다고 생각했고, 더 좋은 방법을 찾아보던 중에 styled-components에서 ThemeProvider라는 기능을 제공하고 있다는 것을 알게 되었다. ..

Hoisting이란? Javascript에는 Hoisting이라는 개념이 존재한다. 사전적인 의미는 '끌어올리다'라는 뜻을 가지고 있고, 의미 그대로 변수와 함수의 선언을 자동으로 파일의 가장 상단으로 끌어올려서 처리하는 것을 말한다. 예를 들면 아래와 같다. Test(); //함수가 선언되기 이전에 참조했는데 정상 작동함 function Test() { console.log("Hi"); } for (var i=0;i

Typescript에서의 클래스에는 C++, 자바처럼 다른 객체지향 언어와 마찬가지로 접근 제한자가 존재한다. public 해당 클래스의 내부와 자식 클래스 및 클래스 인스턴스에서도 모두 접근 가능하다. class Car { name: string = "car"; //name 앞에 public을 명시하지 않아도 default가 public임 color: string; constructor(color: string) { this.color = color; } } class BMW extends Car { constructor(color: string) { super(color); //파생 클래스는 무조건 super를 써야함 } showName() { console.log(this.name); //publi..

interface에 관한 글을 쓰면서 함수에 대한 코드를 잠깐 언급했었는데 이번 글에서도 다뤄보고자 한다. 이미 우리가 알고 있는 함수 그대로이다. Typescript에서는 함수에도 타입을 선언할 수 있다. 리턴값이 없다면 타입은 void가 된다. function test(name: string, age: number): string { if (age === undefined) return `name : ${name}`; else return `name: ${name}, age: ${age}`; } console.log(test('jun')); //error console.log(test('jun', 25)); // name: jun, age: 25 위의 함수는 name과 age 두 개의 변수를 받고 리..

이 글은 Redux의 기본 개념에 대해 알고 있다고 가정하고 진행한다. Redux에 대해 잘 모른다면 아래 글을 참고하면 좋을 듯! [Redux] Vanilla Redux의 기본 개념 Redux는 Javascript의 상태 관리 라이브러리이다. 보통 React와 함께 많이 사용되지만, Augular, jQuery, vanilla JavaScript 등 여러 framework에서 사용이 가능하다. Redux에 기본적인 개념 및 용어를 알아보자... 2junsu.tistory.com 또한 이전 글에서 다뤘던 TodoList 코드를 가지고 진행되니 React Redux (1), (2) 먼저 보고 오길 바란다. [React Redux] React에서 Redux를 사용해보자(1) 이 글은 Redux의 기본 개념에..

이 글은 아래 글의 후속편이니 아래 글부터 보고 오는 것을 추천한다. [React Redux] React에서 Redux를 사용해보자(1) 이 글은 Redux의 기본 개념에 대해 알고 있다고 가정하고 진행한다. 개념을 잘 모른다면 아래 포스팅을 참고하면 좋을 듯! [Redux] Vanilla Redux의 기본 개념 Redux는 Javascript의 상태 관리 라이브러리이 2junsu.tistory.com 이제 추가 기능을 구현했으니 삭제 기능을 구현해보자. 삭제 기능에서 해야할 것은 특정 할 일에 붙어있는 삭제 버튼을 누르면 해당 할 일을 삭제하는 것이다. 따라서 특정 할 일에 대한 id가 필요하다. 그 후 할 일들이 저장된 배열을 돌면서 해당 id를 가지는 할 일을 제외한 나머지를 새로운 배열에 넣은 후..

이 글은 Redux의 기본 개념에 대해 알고 있다고 가정하고 진행한다. 개념을 잘 모른다면 아래 포스팅을 참고하면 좋을 듯! [Redux] Vanilla Redux의 기본 개념 Redux는 Javascript의 상태 관리 라이브러리이다. 보통 React와 함께 많이 사용되지만, Augular, jQuery, vanilla JavaScript 등 여러 framework에서 사용이 가능하다. Redux에 기본적인 개념 및 용어를 알아보자.. 2junsu.tistory.com 할 일을 추가하고 삭제할 수 있는 간단한 Todo List를 구현하면서 React에서 Redux를 사용하는 법을 알아보자. 이 글에서는 '추가' 기능을 구현한다. 또한 Redux에 익숙해지기 위한 글이므로 Local Storage는 사용..