JavaScript/React (8) 썸네일형 리스트형 컴포넌트를 기능별로 분리한 다음 렌더링 컴포넌트를 기능별로 분리하는 이유? 이때까지 컴포넌트를 App.js에 정의해 나갔었다. 지금은 컴포넌트의 수가 많지 않으니 App.js에 있는 컴포넌트를 구별하고 읽기에 어렵진 않겠지만, 각기 다른 기능을 가진 컴포넌트가 매우 많아지고 컴포넌트 하나에 들어있는 코드 줄 수가 많아진다면 추후에 컴포넌트를 수정할때 그 컴포넌트가 있는 부분을 찾기 힘들 것이다. 다시말해 유지보수가 힘들어진다는 것이다. 폴더를 만들고 각각의 파일로 분리 컴포넌트를 분리하는 방법은 간단하다. src 폴더에 컴포넌트를 담는 폴더를 만들고 컴포넌트별로 파일을 분리하면 된다. 컴포넌트를 담는 폴더인 components 폴더를 만들었다. 그리고 App.js에 있는 사용자 정의 컴포넌트를 옮길 파일(Webhead.js)을 componen.. React props를 이용해 재사용 가능한 컴포넌트 제작 props React에서 사용자가 새롭게 정의한 컴포넌트를 발견하면 JSX의 속성을 단일 객체로 저장하는데 이때의 객체를 props라고 부른다. Javascript에서의 객체를 생각하면 이해하기 쉬울 것이다. Javascript의 자료형 중 하나인 '객체(Object)' 객체 (Object) 객체는 자바스크립트에 존재하는 자료형 중 하나이다. 이 객체는 여러 데이터를 담을 수 있다는 점에서 배열과 비슷하나, 배열보다 담을 수 있는 데이터의 종류가 더 다양하다. { } ( ludeno-studying.tistory.com Javascript에서 HTML 태그를 불러올때 DOM을 이용해 객체로 반환되듯이, React에서 JSX에 있는 속성 값을 props에 객체로 반환되는 것이다. 객체이기 때문에 Javas.. React 함수형 컴포넌트, 클래스형 컴포넌트 차이점 함수형 컴포넌트 function App() { return ( // HTML이 들어갈 자리 ); } 클래스형 컴포넌트 import React, { Component } from 'react' class App extends Component{ render(){ return( // HTML이 들어갈 자리 ); } } 선언의 차이점 일단, 함수형 컴포넌트와 클래스형 컴포넌트는 선언 방식부터 다르다. function App() { return ( // HTML이 들어갈 자리 ); } 함수형 컴포넌트는 말 그대로 Javascript의 함수형식으로 되어있는 컴포넌트이다. import React, { Component } from 'react' class App extends Component{ render(){ .. React 컴포넌트(Components) 정의 및 렌더링 컴포넌트(Components)? 컴포넌트는 React에서 화면에 표시할 내용들이 모여서 하나의 구역을 이루는 단위이다. 제작할 웹 사이트에서 같은 형식에 다른 값을 가지고 있는 부분을 만들때 유용하다. 위의 사진에서 빨간 박스의 형식이 밑에도 반복되지만 값은 다른것을 확인할 수 있다. 일일히 다 작성할 필요 없이 React에서 컴포넌트로 위와 같은 형식으로 정의하고 재사용 하면서 값만 바꾸면 더 편하게 코드를 작성할 수 있다. 이러한 컴포넌트 여러개가 모이면서 하나의 웹 페이지를 구성하게 되는 것이다. 컴포넌트 정의 방식 컴포넌트에는 함수형 컴포넌트와 클래스형 컴포넌트가 있다. 함수형 컴포넌트 기본 형식 function App() { return ( // HTML이 들어갈 자리 ); } 클래스형 컴포넌트.. JSX를 이용해 React Element 생성 및 렌더링 JSX? JSX는 Javascript를 확장한 문법이며 Javascript + XML 이다. React Element 나 Component를 생성할때 유용하게 사용한다. 사용하는 방법은 Javscript 문법에 XML(HTML)을 넣어서 사용하면 된다. const element = This is JSX; 위와 같이 Javascript 와 XML 같은 문법(HTML)을 같이 사용하는 것이다. XML 같은 문법을 Javascript로 변환해주는데, JSX 만의 규칙을 지키면서 작성해야 한다. 규칙 1. JSX에서 JSX로 만든 Element 객체나 Javascript 값을 사용하기 위해서는 변수를 { } 중괄호 로 감싸야 한다. 규칙 2. JSX에서 XML(HTML)을 넣을 때 항상 닫는 태그가 존재해야된다.. 원하는 태그를 화면에 렌더링하는 방법 React 개발 시작 전 기본 셋팅 goormIDE 환경을 이용해 포스팅하였습니다. React 프로젝트를 처음 생성하고 실행시키면 아래와 같이 React에서 만든 기본 페이지가 나오게 된다. 실습을 하려면 저 기본 페이지 부분을 없애야 하므 ludeno-studying.tistory.com 위의 포스팅을 통해 React의 기본 페이지를 완전히 빈 페이지로 만들었으면, 이제 그 빈 페이지를 채워 넣어서 나의 페이지를 만들어야 한다. React에서 화면이 렌더링 되는 과정 먼저, 간단하게 React가 화면을 렌더링 하는 과정을 설명하자면 생성한 React 프로젝트에서 npm run start 나 npm start 를 통해 프로젝트를 실행시키면 public 폴더 내부에 index.html 파일을 실행한 결과로.. React 개발 시작 전 기본 셋팅 React 프로젝트를 처음 생성하고 실행시키면 아래와 같이 React에서 만든 기본 페이지가 나오게 된다. 실습을 하려면 저 기본 페이지 부분을 없애야 하므로, 기본페이지 부분에 해당하는 값들을 전부 제거해 주어야 한다. 일단, 처음 React 프로젝트를 생성하게 되면 위와 같이 3개의 폴더와 4개의 파일이 생성된다. 기본페이지에서 'Edit src/App.js and save to reload.' 라고 나와있듯, 수정해야 할 곳은 src 폴더에 App.js이다. src 폴더 내부를 살펴보면 App.js 파일이 존재한다. 이 파일을 열어서 수정하면 된다. App.js import logo from './logo.svg'; import './App.css'; function App() { return ( .. React 개발 환경 구성, 실행 Win10 운영체제를 기준으로 작성된 게시물입니다. React를 사용하기 위해서는 npm을 필요로 하고 npm을 설치하려면 Node.js의 홈페이지에서 Node.js를 설치해야 한다. (2020.09.12 기준)홈페이지에 들어가보면 설치 선택사항에 LTS버전과 Current버전이 있는데, LTS는 장기적으로 지원이 되는 버전이며 Current는 현재 최신버전이다. 취향대로 설치하여 사용하면 되고 필자는 Current버전으로 설치하였다. 설치가 끝났으면, 설치가 제대로 되었는지를 확인하기 위해 cmd를 열어 npm 버전 체크를 한다. npm -v 출력 결과로 버전이 나온다면 설치가 제대로 되었다는 것 이다. 그럼, 이제 리액트를 사용하기 위해 cmd에서 npm를 이용해 create-react-app을 설치.. 이전 1 다음
