React (12) 썸네일형 리스트형 [React] Component 생성 및 활용 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] 이번 시간엔 Component를 생성해보고 이를 사용할 수 있는 방법에 대해 알아보자. React 첫 번째 포스팅에서 설명했던것과 같이 하나의 Class가 Component라 생각하면 된다. 따라서 Class를 생성하고 Component를 상속받으면 된다. 다음과 같이 Bpp와 Cpp 2개의 Component를 생성하고 Bpp에선 Hello를 출력하고 Cpp에선 World를 출력하도록 하자. import React, { Component } from 'react'; import './App.css'; class App extends Componen.. [React] JavaScript 함수 생성 및 JSX 적용 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] Class 내부에 보면 render() { ... }가 존재했던 것을 알 수 있었다. 자세히 보면 함수인 것을 알 수 있다. 따라서 우리도 함수를 만들어서 사용할 수 있다는 것을 알 수 있다. 이번엔 React에 JavaScript 함수를 생성하여 이용해보자. JavaScript 함수 생성 포스팅에서 사용했던 3가지 방법이 있었다. 여기서 2가지는 먹히지만 1개는 적용이 안된다. 다음의 코드를 보자. import React, { Component } from 'react'; import './App.css'; class App extends Com.. [React] React Project 개요 / JSX 실습 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] 이번엔 새로 Project를 생성한 후 JSX를 간단하게 제어하는 것 까지 해보도록 하겠다. 프로젝트 구성 프로젝트를 처음 열면 여러 개의 폴더들이 있다. 여기서 src를 들어가자. 여기서 핵심은 App.js이다. 핵심적인 작업은 저기서 작업을 하게 될 것이다. App.css는 CSS에 관련된 속성들이 저장되어있는 곳이라 생각하면 된다. 이후 변수 형태로 불러와 적용시킬 수 있다. 뒤 쪽에서 한 번 실습하도록 하겠다. 나머지 파일들은 아직 공부를 안 했기에 차후에 정리하겠다. App.js를 열면 이전 포스팅에서 열렸던 화면의 설정이 되어있다. 이번.. [React] React 개념 / 설치 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] 이번엔 React를 공부하면서 알게 된 개념에 대해 정리해보도록 하겠다. 개발환경 Web을 개발할 수 있는 IDE는 다양하게 존재한다. Web Storm, Atom 등등 있을 것이지만 최근에 핫 한 IDE은 당연 VSCode일 것이다. 여러 Module을 Store에서 쉽게 설치할 수 있을 뿐만 아니라, 매우 가볍다. 따라서 이번 실습은 VSCode를 기반으로 작업하도록 하겠다. 또한 기본적으로 설치해야하는 프로그램이 있다. Node.js Create React APP (React Library) 기본적으로 React를 돌릴 때 Node의 서버를 .. 이전 1 2 다음
