Frontend/React (3) 썸네일형 리스트형 3. Component와 Props 그리고 React Developer Tools Component 리액트는 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 분리해서 생각해 볼 수 있게 해준다. component 를 정의하는 방법은 이전 포스팅에서 설명했던 것과 같이 함수형과 클래스형이 있다. 주의: 컴포넌트의 이름은 항상 대문자로 시작 React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리한다. 예를 들어 는 HTML div 태그를 나타내지만, 은 컴포넌트를 나타내며 범위 안에 Welcome이 있어야 한다. 1) 함수형 function Welcome (){ return Happy Coding! } function App() { return ( // 위의 웰컴함수의 내용 Happy Coding!이 나타남 ); } 2) 클래스형 class Subje.. 2. React의 구조 그리고 샘플 웹 앱 실행, 코딩, 배포 React를 구성하는 핵심 3개 파일 public - index.html React App 메인 파일인 index.js의 결과창, HTML 템플릿 파일이다. 이 파일이 직접 표시되는 것은 아니고, index.js에 을 읽어와 렌더링된 결과가 표시된다. index.js의 div id="root"를 내포하고있다. src - index.js ReactDOM.render( , document.getElementById('root') ); 메인파일. ReactDom이 App컴포넌트를 document에서 id값이 root인 태그안에 랜더링 해준다는 의미다. ReactDOM.reder(컴포넌트, 조합 대상 요소); 로 코드를 구성한다. "id가 'root'인 요소들을 아이디 선택자를 기반으로 index.html로 보.. 1. React란? 앞으로 공부전략 그리고 React 설치하기 React란 페이스북 회사에서 페이스북의 UI를 더 잘 만들기 위해서 만든, 웹/앱(RN)의 View를 개발할 수 있도록 하는 자바스크립트 UI 라이브러리이다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다. 컴포넌트에 데이터를 흘려보내면 설계된 대로 UI가 조립되어 사용자에게 보여진다. 왜 React를 사용하는가? 요즘은 pc웹페이지 하나만 사용하지 않는다. 안드로이드 어플리케이션, 맥 어플리케이션, pc 웹사이트, 모바일 웹사이트 사이트가 출력되는 곳? 기기가 다양하다. 이러니 웹사이트가 동적으로 움직여줘야 한다. 이런 웹 어플리케이션에서 UI를 동적으로 나타내기 위해서는 복잡하고 많은 상태를 관리해야 하는 부담이 생긴다. 특히나 프로젝트 규모가 커질수록,.. 이전 1 다음
