개발공부/React9 [React]-Component와 Props 아래 내용은 React Document 를 바탕으로 작성되었습니다. Component와 Props 컴포넌트를 사용해 UI를 재사용이 가능한 여러 조각으로 나누고 각 조각을 개별적으로 살펴볼 수 있다. 개념적으로 컴포넌트는 JavaScript 함수와 유사하다. props라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 함수 컴포넌트와 클래스 컴포넌트 function Welcome(props){ return Hello, {props.name} } 이 함수는 데이터를 가진 하나의 props 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트이다. 이러한 컴포넌트를 함수 컴포넌트 라고 한다. 또한 ES6 class를 사용하여 컴포.. 2020. 8. 18. [React] - 엘리먼트 렌더링 아래 내용은 React Document 를 바탕으로 만들어졌다. 엘리먼트 렌더링 엘리먼트는 React 앱의 가장 작은 단위 이다. 엘리먼트는 컴포넌트의 구성 요소 이다. 엘리먼트는 화면에 표시할 내용을 기술한다. const element = Hello, world;브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며(plain object) 쉽게 생성할 수 있다. *React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 한다. * 추가 예정 DOM에 엘리먼트 렌더링 하기 root 안에 들어가는 모든 엘리먼트를 React DOM 에서 관리한다. 이걸 루트(root) DOM 노드 라고 부른다. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있다. Reac.. 2020. 8. 17. [React] - JSX 아래 내용은 React Document 를 바탕으로 만들어졌다. JSX const element = Hello, world! JavaScript 를 확장한 문법. JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다. const name = "ddingg" const element = hello {name} ReactDOM.render( element, document.getElementById('root') ); JSX의 중괄호 안에는 모든 JavaScript문법을 넣을 수 있다 자동 세미콜론 삽입을 방지하기 위해 괄호 안에서 작업하는걸 추천한다. return TEST // ... Transform to return; ; TEST; ; // 따라서 괄호 안에.. 2020. 8. 17. 이전 1 2 다음
