React

개인 프로젝트로 포트폴리오 웹애플리케이션을 만들기 앞서서, MERN 스택에서 첫 번째로 React를 학습할 예정이다. 가장 기초부터 학습하며 직접 UI를 구현해보자!이번 챕터에서는 JSX의 주요 개념들에 대해 알아본다.React에서는 본질적으로 렌더링 로직이 UI로직(

들어가는 말 UI를 재사용 가능한 component로 나누어 관리할 수 있다. 개념적으로 component는 JavaScript 함수와 유사하다. props라고 하는 임의의 입력을 받은 후, React element를 반환한다. 함수 component와 클래스 com

들어가는 말 이전 글에서 구현한 시계 예시를 다시 살펴보자. 이번 글에서는 component를 완전히 재사용 가능하게하고 캡슐화하는 방법을 다룰 것이다. 위 시계 예시로 Clock component를 만들고, setInterval() 함수의 도움없이 스스로 타이머를

React element의 이벤트를 처리하는 방식은 DOM element의 이벤트를 처리하는 방식과 매우 유사하나, 몇 가지 문법 차이가 있다.React의 이벤트 attribute는 소문자 대신 카멜 표기법을 사용한다.JSX를 사용하여, 문자열이 아닌 함수로 이벤트 핸

원하는 동작을 캡슐화하는 component들을 만들고, 애플리케이션의 상태에 따라서 component 중 몇개만 렌더링할 수 있다.React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 동일하게 동작한다. if나 ? 연산자와 같은 JavaScript 연산자

우선 JavaScript에서 리스트를 다루는 방법을 보자.아래는 map() 메서드를 이용하여 numbers 배열 요소들의 값을 두 배로 만든 후, map()에서 반환하는 새 배열을 doubled 변수에 할당하는 코드이다.React에서 element의 배열을 사용하는 방

HTML form element는 form element 자체가 내부 state를 가지기 때문에, React의 다른 DOM element와 다르게 동작한다.위 예시에서, 사용자가 form을 제출하면 새로운 페이지로 이동하는 default HTML form 동작을 수행한

종종 동일한 데이터에 대한 변경사항을 여러 component에 반영해야 할 때가 있다. 이럴때는 가장 가까운 공통 부모의 state를 끌어올리는 것이 좋다.이번 글에서는 주어진 온도에서 물의 끓는 여부를 추정하는 온도 계산기를 만들어보자.우선, BoilingVerdic

React에는 강력한 합성 모델을 가지고 있으며, 상속 대신 합성을 사용하여 component간에 코드를 재사용하는 것이 좋다.어떤 component들은 어떤 자식 element가 들어올 지 미리 예상할 수 없는 경우가 있다. Sidebar나 Dialog같은 compo

문제 발생 프론트단에서는 React, 백엔드단에서는 Django를 사용하여 프로젝트를 진행하던 중에 프론트단에서 백엔드 API를 가져오는 과정에 CORS 에러가 발생했다. 원인 분석 CORS CORS(Cross-origin resource sharing)는 웹 페이지