전체 글

리덕스가 필요한 이유 (1) useState의 불편함 컴포넌트에서 컴포넌트로 State를 보내기위해서는 반드시 부-모 관계가 되어야 한다. 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할때도 반드시 부모 컴포넌트를 거쳐야만 한다. 즉, 정작 부모컴포넌트에서는 그 값이 필요가 없어도 단순히 손자 컴포넌트에게 전달하기 위해 불필요하게 거쳐야만 하는 것을 의미한다. (조부모 → 부모 → 손자) 자식 컴포넌트에서 부모 컴포넌트로 값을 보낼 수 없다. => 리덕스를 사용하면 State를 공유하고자 할때 부-모 관계가 아니여도 되고, 중간에 의미없이 컴포넌트를 거치지 않아도 된다. 그리고 자식 컴포넌트에서 만든 State를 부모 컴포넌트에서도 사용할 수 있게 된다. (2) Global state와 Local ..

개요 리액트(react.js)나, 뷰(Vue.js)는 가상돔(Virtual DOM)을 사용해서 원하는 화면을 브라우저에 그려주는데, 자체적으로 상당히 효율적인 알고리즘을 사용해서 그려주기 때문에 그 속도가 굉장히 빠르다. 그렇다면 돔은 무엇이고 가상돔은 대체 무엇인가? DOM 1) DOM이란? 가상돔을 이해하기 위해서는 먼저 DOM(Document Object Model)을 이해할 필요가 있다. 브라우저를 돌아다니다 보면 수 많은 컴포넌트로 구성된 웹페이지들을 보게 되는데, 그 페이지를 문서(document)라고 하고, 페이지를 이루는 컴포넌트를 엘리먼트(element)라고 한다. DOM은 이 엘리먼트를 tree 형태(= DOM TREE)로 표현한 것이다. 트리의 요소 하나하나를 ‘노드’라고 부르고, ..

Emmet 에밋은 HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인이다. 원래 젠코딩으로 부르다가 에밋으로 이름을 변경했다. 매우 간단한 몇 가지 코드만 입력하면, 자동으로 완전한 HTML 코드를 생성해 준다. 사용방법 단축키 입력 후 tab 키를 누르면 자동 완성됨 1. ! => html5 자동완성 2. 태그명 입력 시 태그 자동완성 3. 태그명 + . => 클래스 자동완성 4. 태그명 + # => 아이디 자동완성 ex) div#box 5. 태그명 > 태그명 > 태그명 => 부모 자식 노드 자동완성 6. 태그명 + 태그명 =>형제노드 7. 태그명 + 태그명 * N => n만큼 태그 반복 ex) ul>li*5 8. ^ => 자식노드 만든 후 그 부모의 형제 노드 만들기 ..

useContext란? 1. react context의 필요성 리액트에서 부모 ->자식 컴포넌트로 데이터를 전달해 줄 때 부모->자식->자식->자식 이런 식으로 너무 깊이가 깊어지면, prop drilling 현상이 일어난다. prop drilling의 문제점은 깊이가 너무 깊어지면 이 prop이 어떤 컴포넌트로부터 왔는지 파악이 어려워지고, 어떤 컴포넌트에서 오류가 발생할 경우 추적이 힘들어지니 대처가 늦을 수 밖에 없다. 그래서 등장한 것이 바로 react context API라는 것이다. useContext hook을 통해 우리는 쉽게 전역데이터를 관리할 수 있게 되었다. useContext 필수 개념 createContext : context 생성 Consumer : context 변화 감지 Pr..