JavaScript/React (4) 썸네일형 리스트형 [React] 컴포넌트와 props 함수 컴포넌트 / 클래스 컴포넌트 리액트의 컴포넌트는 자바 스크립트의 함수와 클래스로 작성할 수 있음 함수 컴포넌트 let Main = function(){ return ( Welcome!! ) } 클래스 컴포넌트 class Main extends React.Component { render() { return ( Hello, {this.props.name} ) } } render에 있는 부분이 컴포넌트로 생성됨 사용자 정의 컴포넌트 컴포넌트 생성 시, 이미 정의해 놓은 컴포넌트를 가져와 사용할 수 있음 let SubComponent = function(){ return Welcome!!; } let MainComponent = function(){ return ( //위에서 생성한 컴포넌트를 사용 ) .. [React] 엘리먼트 렌더링 Dom에 엘리먼트 렌더링 시키기 react 엘리먼트를 html에 랜더링 시키기 위해 ReactDOM.render() 를 사용할 수 있음 사용 문법은 아래와 같음 ReactDOM.render(reactEl, dom) reactEl : 추가한 리액트 엘리먼트 dom : 추가될 리액트 엘리먼트의 부모 html문서에 "container"라는 아이디를 가진 div태그가 있다고 가정 아래와 같이 "container"에 리액트 엘리먼트를 추가 const App = () => { return ( 안녕하세요!! ); } ReactDOM.render(,document.querySelector("#container")); JSX문법을 이용하여 App 엘리먼트를 #container 에 랜더링 시킴 참조: https://ko... [React] React프로젝트 생성 React 프로젝트 생성 1. 먼저 터미널에서 cd 명령어를 통해 프로젝트를 생성한 적당한 폴더로 이동 2. 터미널에 npx create-react-app [프로젝트명(폴더명)] 입력하여 react 프로젝트 생성(먼저 npm --version 명령어로 npm이 설치되어 있는지 확인) 3. vscode에서 해당폴더를 열어 프로젝트 파일들을 확인 [React] React와 JSX React란? React는 화면에 보여지는 사용자 인터페이스를 구축하기 위한 선언적, 효율적인 Javascript 라이브러리 '컴포넌트' 라고 불리는 독립적인 코드의 파편이 복잡한 UI를 구성하는데 도움을 줄 수 있음. React의 3가지 특징 React의 3가지 특징: 선언형, 컴포넌트 기반, 확장성 선언형(Declarative) react는 페이지를 보여주기 위해 html/css/javascript 를 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향 컴포넌트 기반(component-based) react는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 함 컴포넌트로 분리 시 서로 독립적이고 재사용이 가능해서 기능 자체에 집.. 이전 1 다음
