React.js
-
[React] State란?React.js 2022. 9. 29. 10:56
State란 무엇일까? 어떠한 제품 뭐가 되었던 간에 사용자의 입장과 그것을 구현하는 구현자의 입장이 있을겁니다. 사용자의 입장에서 밑 제품을 조작하는 장치는 왼쪽 버튼들 혹은 화면을 터치하는 것 입니다. 유저 인터페이스라고도 부릅니다. 이런것들이 컴퍼넌트를 만드는 React관점에서는 Props가 사용자가 저 제품을 조작하는 장치라고 생각할 수 있습니다. 저 제품을 만드는 사람들은 저 제품에 내부적인 구현을 위해서 다향한 상태들을 사용하고 다향한 내부 조작 장치들, 매커니즘 부분을 가지고 있는데 그런 것들이 비유적으로 얘기하자면 state라고 합니다. 즉 props는 사용자가 컴포넌트를 사용하는 입장에서 중요한 것이고 state는 그 props 값에 따라서 내부의 구현에 필요한 데이터들이 state라고 ..
-
[React] Component 파일로 분리해보기React.js 2022. 9. 28. 10:32
Component을 파일로 분류해서 더욱 깔끔하고 관리하기 쉽게 만들어 보겠습니다. 우선 src에 components폴더를 만들어서 따로 관리 하도록 설정 해보겠습니다. js파일을 만들어준후 만들어 뒀던 component를 복사해서 붙혀넣어줍니다. 그런다음 import로 불러와 주시면 됩니다. 밑에 만들어둔 Subject,Middle,Foot을 모두 따로따로 만들어주겠습니다. 그런다음 import해준 후 전부 지워주시면 깔끔해진 것을 보실 수 있습니다. import React, {Component} from 'react'; 를 안해주시면 에러가 발생하기 때문에 꼭 넣어주세요. 쫘잔~!
-
[React] 컴포넌트 생성React.js 2022. 9. 26. 10:10
오늘은 리액트 컴포넌트를 생성해 보겠습니다. 원래는 밑처럼 html문서를 작성하지만 컴포넌트를 생성해서 html을 정리하여 필요한 것만 빼다 쓸 수 있는 리액트의 컴포넌트 만들기를 해보겠습니다. 컴포넌트를 생성하는 방법은 js파일에 class를 이용하여 작성해줍니다. class 이름 extends Component{ render(){ return( html내용 ); } } 위처럼 만들어 주면됩니다. 이런식으로 작성을 해준다음 이름들을 불혀 넣어주면 성공입니다. 효율적으로 리팩토링을 하는 방법에는 this.props를 사용하여 값을 필요할때만 넣어 주는식으로 사용 가능합니다.
-
[React] npm을 이용해서 react설치 및 개발환경 구축React.js 2022. 9. 23. 10:59
리액트를 설치 해보도록 하겠습니다. 설치는 밑에 링크에 들어가서 해주세요~ https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 버튼을 눌러 다운을 했다면 Setup을 해줍시다. 설치가 끝나셨다면 윈도우키 + R을 눌러서 cmd 커맨드 창을 띄어주세요~~! npm -v 을 누르시면 설치한 버전이 나옵니다. 만약 안나온다면 설치가 안된거에용 그다음 npm install -g create-react-app 을 해주어서 다운을 해줍니다. 설치한 다음 create-react-app -v 으로 다운이 잘 받아졌는지 확인해줍니다. 잘 받아졌다면 폴더를 하나 만들어 ..