본문 바로가기
props, state, 리렌더링 발생 조건 props와 state의 공통점 props와 state는 둘 다 일반 JavaScript 객체이며, 렌더링 결과물에 영향을 주는 정보를 갖고 있습니다. props와 state 둘 다 부모 컴포넌트로부터 초기값을 받을 수 있고, 컴포넌트 안에 디폴트 값이 설정되어 있으며, 자식 컴포넌트의 초기값을 설정할 수 있습니다. props와 state의 차이점 props는 함수의 매개변수처럼 컴포넌트에 전달되지만, state는 함수 안에 선언된 변수처럼 컴포넌트 안에서 관리됩니다. props는 부모 컴포넌트에 의해 바뀔 수 있고 자식 컴포넌트 안에서 바뀔 수 있지만, state는 부모 컴포넌트에 의해 바뀌지 못 하고 자식 컴포넌트 안에서 바뀔 수 없습니다. state는 컴포넌트 내부를 바꿀 수 있지만, props는 ..
React에서 반드시 알아야 하는 것들! Q1) 자바스크립트에서 유사배열과 배열의 차이점은? 유사배열의 각 요소를 수정하고 싶을 땐? A1) 유사배열은 배열의 내장함수를 사용할 수 없습니다. 따라서 해당 유사배열이 사용할 수 있는 반복문 등을 이용해 유사배열을 먼저 배열로 바꿉니다. 그 후, 배열의 내장함수를 통해 변경합니다. 또는 유사배열 요소 하나하나에 직접 접근해서 바꿉니다. Q2) 부모 컴포넌트의 state가 바뀌면 자식 컴포넌트의 state도 바뀝니다. 이 과정을 라이프 사이클로 그려보세요. A2) Q3) 양방향 바인딩이란? 양방향 바인딩을 사용할 경우, 리렌더링이 어떻게 이루어질까요? A3) 부모 컴포넌트에서 자식 컴포넌트로 데이터가 흐르면 단방향, 부모가 자식에게 데이터를 전달해주고, 자식이 그 데이터를 수정할 수 있으면 양방향 바..
리액트 훅(Hooks) 종류 및 특징 훅(React Hooks)이란? 리액트 16.8 버전부터 추가된 기능으로, 클래스 컴포넌트와 생명주기 메서드를 이용하던 기존 방식에서 벗어나 함수형 컴포넌트에서 더 직관적인 함수를 이용할 수 있게 만든 기능입니다. 훅 사용 규칙 1. 훅은 최상위 레벨에서만 호출 가능합니다. 반복문, 조건문, 중첩된 함수 안에서 호출하면 안 됩니다. 2. 훅은 오직 리액트 함수 컴포넌트 내에서만 호출 가능합니다. 훅 종류 useState (동적 상태 관리) useEffect (side effect 수행 -mount/unmount/update) useContext (컴포넌트를 중첩하지 않고도 전역 값 쉽게 관리) useReducer (복잡한 컴포넌트들의 state를 관리 -분리) useCallback (특정 함수 재사용) ..
라우팅이 뭘까? 라우팅(routing)이란? 어떤 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정을 말합니다. 이때 최적의 경로는 주어진 데이터를 가장 짧은 거리로 또는 가장 적은 시간 안에 전송할 수 있는 경로입니다. 라우팅은 라우트와 다릅니다. 라우트는 라우팅에 의한 결과로, 경로를 뜻하고 라우팅은 앞서 말씀드렸듯 경로를 찾아가게 하는 과정을 뜻합니다. 라우팅 종류 라우팅에는 2가지 종류가 있습니다. 정적 라우팅과 동적 라우팅인데요. 정적 라우팅은 관리자가 네트워크에 대한 경로 정보를 직접 지정하여 라우터마다 최적의 경로를 인위적으로 등록하는 것입니다. 정적 라우팅은 관리자가 지정한 라우팅 정보만 참조하므로 동적 라우팅보다 속도가 빠르고 안정적입니다. 하지만 네트워크가 자주 변하거나 등록해야 할 ..
리덕스란? 새로고침할 때도 리덕스 안의 데이터를 유지하려면? 먼저, 리덕스가 뭘까요? 리덕스는 아주 흔히 사용되는 상태 관리 라이브러리입니다. 리덕스는 데이터를 한 군데 몰아넣고, 여기저기에서 꺼내볼 수 있게 해주기 때문에 우리가 전역 상태를 편하게 관리할 수 있습니다. 리덕스는 React뿐 아니라 다른 프론트엔드 프레임워크나 라이브러리와 함께 쓸 수 있습니다. 리덕스를 사용하려면 리덕스 패키지를 설치해야 합니다. 터미널에 다음을 붙여넣고 enter를 치세요. yarn add redux react-redux 리덕스의 기본 용어를 알아보겠습니다. 1. State 리덕스에서는 저장하고 있는 데이터를 상태 값(state)이라고 부릅니다. state는 딕셔너리 형태인 {[key]: value}로 보관됩니다. 2. Action action은 state를 변경할 때 발생하는..
DOM이 그래서 정확히 뭘까? DOM은 웹 페이지에 대한 인터페이스입니다. 여러 프로그램들이 페이지의 구조 및 내용, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공합니다. 라고는 하는데 무슨 말인지 잘 와닿지 않죠? 저도 그랬습니다. DOM이 무엇인지 정확히 이해하려면 웹 페이지가 어떻게 만들어지는지 알고 있어야 합니다. 웹 브라우저는 서버로부터 받은 원본 HTML 문서대로 웹 페이지를 그립니다. 이때 브라우저는 HTML 내 모든 내용을 렌더링하지 않고, 일련의 선택을 통해 최종적으로 렌더링 될 내용을 결정합니다. 이 과정에서 렌더 트리라는 것이 생성됩니다. 렌더 트리는 웹 페이지에 표시될 HTML 요소들과 이와 관련된 스타일 요소들로 구성됩니다. 즉, 렌더 트리는 다음 두 가지로 이루어져 있습니다. DOM(Document O..
JavaScript의 ES란? ES5 vs. ES6 ES란? 한국어에 표준어가 있듯이, JavaScript에도 표준 규격이 있습니다. 이 표준 규격을 ES라고 부릅니다. ES는 웹 브라우저 시장에서 회사들이 점유율을 다투다가 탄생했습니다. 넷스케이프 사에서 개발한 JavaScript가 선풍적인 인기를 끌기 시작하자 마이크로소프트 사에서도 IE 3(인터넷 익스플로러)에 JScript라는 이름으로 JavaScript를 탑재했습니다. 이 둘은 이름은 같지만 내용이 매우 달라서 같은 기능을 구현하더라도 개발자들이 해야 할 일이 훨씬 늘어나게 되었습니다. 두 회사가 사용자를 끌어들이기 위해 JS에 기능을 각자 이것저것 추가하다 보니, JavaScript와 JScript는 점점 더 달라지게 되었습니다. 이에 보다못한 ECMA에서 JavaScript의 표준을 정했습니..
React에서 이벤트 리스너 삭제하는 법 React를 공부하다가 다음 문제를 마주쳤습니다. Q) event listener는 등록되면 반드시 해제되어야 합니다. 클래스형 컴포넌트에서는 컴포넌트가 화면에서 사라질 때(unmount 될 때) event listener를 해제합니다. (componentWillUnmount에서요!) 그럼 라이프사이클 메소드를 사용할 수 없는 함수형 컴포넌트에서는 event listener를 해제할 때 어떻게 해야 할까요? 이게 문제입니다만... 문제가 뭘 묻는 건지 이해하지 못하겠습니다. 모르는 용어 투성이에요. 차라리 고대 그리스어를 해독하는 게 빠르겠네요. 아쉽게도 전 개발 공부를 하고 있기에 언어학자의 꿈은 접고, 구글링을 하러 가보겠습니다. 먼저, 질문에 등장한 용어들의 정의는 이렇습니다. event liste..

티스토리툴바