그럼에도 불구하고

오늘은 Context API에 대해 알아보겠습니다. [ Context ] Context는 리액트 컴포넌트 간에 어떠한 값을 공유할 수 있게 해주는 기능입니다. 주로 Context는 전역적으로 필요한 값을 다룰 때 사용하는데, 꼭 전역적인 필요는 없습니다. Context를 단순히 "리액트 컴포넌트에서 Props가 아닌 또 다른 방식으로 컴포넌트 간에 값을 전달하는 방법이다"라고 접근을 하시는 것이 좋습니다. [ Context API ] React에서 Props와 State는 부모 컴포넌트와 자식 컴포넌트 또는 한 컴포넌트 안에서 데이터를 다루기 위해 사용됩니다. 이 Props와 State를 사용하게 되면 부모 컴포넌트에서 자식 컴포넌트, 즉 위에서 아래, 한쪽으로 데이터가 흐르게 됩니다. 만약 다른 컴포넌..

오늘은 useReducer에 대해 알아보겠습니다. [ useReducer ] React 공식 문서에 따르면 useReducer는 useState의 대체 함수라고 합니다. 위와 같이 React 공식 문서에서 언급된 것처럼, useReducer는 State(상태)를 관리하고 업데이트하는 Hook에만 useState를 대체할 수 있는 Hook 훅입니다. 다시 말해, useReducer는 useState처럼 State를 관리하고 업데이트할 수 있는 Hook입니다. useReducer의 묘미는, 한 컴포넌트 내에서 State를 업데이트하는 로직 부분을 그 컴포넌트로부터 분리시키는 것을 가능하게 해 준다는 것입니다. 그렇게 useReducer는 State 업데이트 로직을 분리하여 컴포넌트의 외부에 작성하는 것을 가..

오늘은 useEffect()에 대해 알아보겠습니다. [ useEffect ] useEffect() 함수는 React component가 렌더링 될 때마다 특정 작업(Sied effect)을 실행할 수 있도록 하는 리액트 Hook입니다.여기서 Side effect는 component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 뜻합니다. 이러한 기능으로 인해 함수형 컴포넌트에서도 클래스형 컴포넌트에서 사용했던 생명주기 메서드를 사용할 수 있게 되었습니다. useEffect는 component가 mount 됐을 때, component가 unmount 됐을 때, component가 update 됐을 때, 특정 작업을 처리할 수 있습니다. 즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 ..

오늘은 useRef에 대해 알아보겠습니다. [ useRef ] useRef는 current 프로퍼티로 전달된 인자 (initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. - React 공식 홈페이지 useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook이다. 여기서 Ref는 reference, 즉 참조를 뜻합니다. 우리가 자바스크립트를 사용할 때에는, 우리가 특정 DOM을 선택하기 위해서 querySelector 등의 함수를 사용했습니다. React를 사용하는 프로젝트에서도 가끔씩 DOM을 직접 선택해야 하는 상황이 필요합니다. 그럴 때 우리는 useRef라는 React Hook을 사용합니다...

오늘은 Portal에 대해 알아보겠습니다. :) [ Portal ] React 공식 문서에 따르면 Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법이라고 합니다. 현재 와 은 부모 자식 관계로 속해있습니다. [ 사용 이유 ] 일반적으로 react는 부모 컴포넌트가 렌더링 되면 자식 컴포넌트가 렌더링 되는 tree 구조를 가지고 있습니다. 하지만 때때로 이런 tree구조가 불편함을 가져다주기도 해서, 이럴 때 부모-자식 관계를 유지하지만 독립적인 위치에서 렌더링을 하면 훨씬 편리한 경우가 있습니다. 대표적인 예로 modal은 부모 컴포넌트의 스타일링 속성에 제약을 받아 z-index 등으로 번거로운 후처리를 해줘야합니다. 이러한 상황에서 portal..

React에서 input에 연결시킬 태그에 for 속성을 넣으면 다음과 같은 에러가 발생한다. 이럴 때는 for 대신 'htmlFor'를 사용하면 해결된다.

오늘은 Styled Component에 대해 알아보겠습니다. :) [ Styled Component ] React, Vue, Angular와 같은 라이브러리, 프레임워크가 인기를 끌면서 재활용 가능한 컴포넌트 기반 개발이 주류가 되고 있습니다. 여러 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, JavaScript를 모두 담는 코드를 많이 사용하고 있습니다. React는 이미 JSX를 통해 HTML을 포함하고 있고, Styled Component 라이브러리를 사용하여 CSS를 JavaScript에 삽입할 수 있습니다. [ 설치 방법 ] npm install --save styled-components [ SASS는 불충분한가요? ] CSS 클래스명에 대한 고민 문제 가이드가 없으면 복잡해지는 구..

오늘은 state란 무엇인지 알아보겠습니다. [ prop / state ] React 공식 문서에 따르면 prop와 state를 다음과 같이 정의하고 있습니다. prop(properties의 줄임말)와 state는 일반 자바스크립트 객체다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데 한 가지 중요한 방식에서 차이가 있다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내 선언된 변수처럼) 컴포넌트 안에서 관리한다. React에서 this.props와 this.state는 모두 렌더링된 값을 나타낸다. 다시 말해 현재 화면에 보이는 걸 말한다 state와 prop을 정리하면 아래와 같습니다. 둘 다 일반 자바스크립트 객체이다. state는 컴포넌트 안에서..

오늘은 props에 대해 알아보겠습니다. React에서는 component를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. "props"라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 react element를 반환합니다. [ 함수 컴포넌트 ( Function Component ) ] component를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것입니다. HTML 삽입 미리보기할 수 없는 소스 이 함수는 데이터를 가진 하나의 "props" (props는 속성을 나타내는 데이터입니다.) 객체 인자를 받은 후 react element를 반환하므로 ..

오늘은 React에 대해 알아봅시다. [ 리액트 React ] 리액트는 UI 자바스크립트 라이브러리로써 싱글 페이지 애플리케이션의 UI(User Interface)를 생성하는데 집중한 라이브러리입니다. 리액트는 자바스크립트에 HTML을 포함하는 JSX(Javascript XML)이라는 간단한 문법과 단방향 데이터 바인딩(One-way Data Binding)을 사용하고 있습니다. 그리고 가상 돔 (Virtual DOM)이라는 개념을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리입니다. 리액트는 싱글 페이지 애플리케이션에서 UI를 만드는 자바스크립트 라이브러리이다 보니, 싱글 페이지 애플리케이션을 제작을 하는 다른 프레임워크에 비해 부족한 부분이 있습니다. 예를 들어 리액트는 페이지 전환 기능을..