react

What can you do if you want to use Hooks logic inside a class component, but there’s no option to rewrite that class to Hook?If you’re impatient and w

Routes => 둘러쌓인 route 컴포넌트중 1개만의 렌더링을 허락한다./ 가 있고 밑에 /topics가 있을경우에서 메인 홈페이지(/)로 이동시 밑의 route component /topics는 선택되지 않는다. (exact 사용.)<a href="" 같은

JSX 표현식을 반환 할때어트리뷰트에 JavaScript 표현식을 삽입할 때 중괄호 주변에 따옴표를 입력하지 마라. 따옴표(문자열 값에 사용) 또는 중괄호(표현식에 사용) 중 하나만 사용하고, 동일한 어트리뷰트에 두 가지를 동시에 사용하면 안된다.JSX는 HTML보다는

엘리먼트는 React 앱의 가장 작은 단위입니다.엘리먼트는 화면에 표시할 내용을 기술합니다.HTML 파일 어딘가에 <div>가 있다고 가정해 봅시다.이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 “루트(root)” DOM 노드라고

다섯 단계로 Clock과 같은 함수 컴포넌트를 클래스로 변환할 수 있습니다.React.Component를 확장하는 동일한 이름의 ES6 class를 생성합니다.render()라고 불리는 빈 메서드를 추가합니다.함수의 내용을 render() 메서드 안으로 옮깁니다.ren

React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사합니다. 몇 가지 문법 차이는 다음과 같습니다.React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다.JSX를 사용하여 문자열이 아닌 함수로 이

The logical AND (&&) operator (logical conjunction) for a set of boolean operands will be true if and only if all the operands are true. Otherwise it

먼저 JavaScript에서 리스트를 어떻게 변환하는지 살펴봅시다.아래는 map()함수를 이용하여 numbers 배열의 값을 두배로 만든 후 map()에서 반환하는 새 배열을 doubled 변수에 할당하고 로그를 확인하는 코드입니다.이 코드는 콘솔에 \[2, 4, 6,

전반적으로 <input type="text">, <textarea> 및 <select> 모두 매우 비슷하게 동작합니다. 모두 제어 컴포넌트를 구현하는데 value 어트리뷰트를 허용합니다.주의select 태그에 multiple 옵션을 허용한다면 value

먼저 BoilingVerdict라는 이름의 컴포넌트부터 만들어봅시다. 이 컴포넌트는 섭씨온도를 의미하는 celsius prop를 받아서 이 온도가 물이 끓기에 충분한지 여부를 출력합니다.그 다음으로 Calculator라는 컴포넌트를 만들어보겠습니다. 이 컴포넌트는 온도

어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올 지 미리 예상할 수 없는 경우가 있습니다. 범용적인 ‘박스’ 역할을 하는 Sidebar 혹은 Dialog와 같은 컴포넌트에서 특히 자주 볼 수 있습니다.이러한 컴포넌트에서는 특수한 children prop을 사용하여 자식

때로는 어떤 컴포넌트의 “특수한 경우”인 컴포넌트를 고려해야 하는 경우가 있습니다. 예를 들어, WelcomeDialog는 Dialog의 특수한 경우라고 할 수 있습니다.React에서는 이 역시 합성을 통해 해결할 수 있습니다. 더 “구체적인” 컴포넌트가 “일반적인”

React는 JavaScript로 규모가 크고 빠른 웹 애플리케이션을 만드는 가장 좋은 방법입니다. React는 Facebook과 Instagram을 통해 확장성을 입증했습니다.React의 가장 멋진 점 중 하나는 앱을 설계하는 방식입니다. 이 문서를 통해 React로

styled-components란 Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리입니다.물론, 이러한 인라인 스타일링이 별로 달갑지 않은 분들도 계실 것 같습니다

인라인 스타일은 HTML에서 태그 안에 스타일 속성을 추가할때 사용했다.마찬가지로 리액트에서 컴포넌트 / 일반 태그 안에 스타일 속성을 줄 수 있다.단, JSX 문법에 의해서 HTML에 적용하던 방법과는 다르다.style에 대한 value는 객체 형태이다.CSS 속성

자바스크립트 컴파일링은 코드를 더 많은 브라우저가 이해할 수 있는 다른 버전의 자바스크립트 구문으로 변환한다.경우에 따라 모듈에서 단 하나의 이름만을 외부에 익스포트하고 싶을 때가 있다. 기본 타입, 객체, 배열, 함수 등 모든 타입의 자바스크립트 이름을 외부로 노출시