강백호같은개발자

React에서 State란 컴포넌트가 갖는 상태를 말합니다. 컴포넌트의 상태를 관리할 수 있습니다. 객체의 형태로 컴포넌트 내에서 보관하고 관리합니다. State가 작성되기 위해서는 class 컴포넌트로 작성되어야 합니다. 그리고 State 값을 변경할 땐 반드시 setState 메소드를 사용해야합니다. State가 변경되면 랜더 함수가 다시 실행됩니다. 하나씩 살펴봅시다. 째깍 시계 코드를 살펴봅시다. function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); ReactDOM.render( element, document.getElementById('root') ); } setInterval(t..

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. 'props'라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. 함수 컴포넌트와 클래스 컴포넌트 컴퍼넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것입니다. function Welcome(props){ return Hello, World! } 이 함수는 데이터를 가진 하나의 'props'(props는 속성을 나타내는 데이터) 객체 인자를 받은 후 React 엘리먼트를 반환하므로, 유효한 React 컴포넌트입니다. 이러한 컴포넌트는 JavaScript함수이기..

Element 는 React 앱의 가장 작은 단위입니다. 엘리먼트는 화면에 표시할 내용을 기술합니다. const element = Hello, World; 브라우저 DOM 엘리먼트와 다르게, React 엘리먼트는 일반 객체(plain object)이고, 쉽게 생성할 수 있습니다. 그리고 React DOM은 React엘리먼트와 일치하도록 DOM을 업데이트합니다. *주의* '컴포넌트'와 '엘리먼트'를 혼동하지 마세요. 엘리먼트(element)는 컴포넌트의 구성요소입니다. DOM에 엘리먼트 렌더링하기 HTML 파일 어딘가 이 있다고 가정해 봅시다. 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에, 이것을 "루트(root)" DOM 노드라고 부릅니다. React로 구현된 애플리케이션은 일..

const element = Hello, world!; JSX는 HTML도 아니고, 문자열도 아닌 형태로 사용합니다. 아주 희안합니다. 그러니까, JavaScript안에서 태그 모양을 그대로 불러와서 사용하는 문법이라고 생각하면 좋겠습니다. 1. 먼저 하나의 엘리먼트가 모든 엘리먼트를 감싸고 있어야합니다. 2. 자바스크립트 코드를 적용할 땐 중괄호 {} 안에서 이용해야한다. 3. JSX 내부에서는 if문을 사용할 수 없기 때문에 3항 연산자로 표시해야합니다. 조건부랜더링 할 땐 () ? a : b 4. 엘리먼트의 클래스 이름은 class 대신 className이라고 사용한다. JSX도 표현식이기 대문에 컴파일이 끝나면 JavaScript객체로 인식됩니다. 즉, JSX를 if 구문이나 for loop 안에..