IT,프로그래밍/React.js
[React 공부노트 #4] 컨테이너 프리젠터 (Container-Presenter) 디자인 패턴
Container-Presenter pattern only container 기존의 개발방법은 클래스컴포넌트와 스테이트를 만들고, api서버에서 필요한 데이터를 가져오는데,모두 한곳에서 구현한다. 이것은 비교적 작은 프로젝트에서 사용할때 주로 쓰인다. 이유는, 비지니스로직과 뷰가 한곳에 존재하게 되면 코드가 여러가지 기능이 섞여있기에 프로젝트가 커지게 되면 점점 유지보수하기가 힘들어진다. 그렇기에 유지보수를 위하여 뷰와 비지니스로직을 분리해서 따로 관리를할 필요성이 있는데, 그래서 사용하는것이 컨테이너 프리젠터(container-presenter) 디자인 패턴이다. 개인적으로 비지니스 로직과 뷰를 분리한다는 점에서 백앤드에서 자주쓰이는 MVC패턴과 유사함을 느꼈다. 컨테이너 프리젠터(container-p..
[React 공부노트 #3] react에서 axios 사용해서 api와 통신하기
Networking api.js 이라는 파일을 만들어서 api와 통신하는 코드를 몰아 넣을것이다. 그래야지 API 요청에 대한 비지니스 로직이 분산되지 않고 한곳에서 컨트롤이 되기에 유지보수성이 더욱 좋아진다. 나는 API서버와 axios를 사용해서 통신을 할것다 axios axios Promise based HTTP client for the browser and node.js www.npmjs.com 이 모듈은 HTTP통신을 보내게 할수 있는데, 이 모듈을 통해서 api서버에 원하는 요청을 보낸뒤에 받아오는 결과값을 사용할것이다. const api = axios.create({ baseURL: "https://api.themoviedb.org/3/", params: { api_key: "----", ..
[React 공부노트 #2] react의 구조
Component component를 쓰는 이유는 어플리케이션의 부분부분을 캡슐화 해서 쓰기 위해서 사용한다. 그렇기 떄문에 html, css, js, logic 을 한 곳에 모아서 독립적인 모듈화 시키고 싶기에 사용을 한다. component folder 우선 component의 개념을 가진 folder를 만든후 html, css, js 다같이 넣어서 폴더별로 관리하는 방법이 있다. 하지만 문제점은 css의 classname을 사용을 할때마다 기억해야하고, 중복이 되면안되며 쓸때마다 import해줘야 하기에 불편하다. 그렇기에 global로 적용이 되는 css가 아닌 local적용이 되는 css를 만들어야 한다. css module 강의 3.1 위의 문제를 개선할수 있는 방법은 바로 css를 modul..
[React 공부노트 #1] react의 구조
react의 구조 public public directory 내부의 index.html의 부분이 있다. react는 저 id가 root인 div 내부에 내용을 바꿔가면서 보여주는데 이것을 가상DOM (virtual DOM) 이라고 한다 index.js 가장 상위의 react 파일 실제 랜더링 되는 components를 import해서 사용한다 App.js 이 파일에서 개발에 사용하는 component를 import해준다 이때 import되는 GlobalStyles, Header와 같이 상위개념의 component를 가져온다 민들어둔 헤더를 import 하면 router 밖에 있기 때문에 항상 노출이 된다 여러개의 리턴을 위하여 flagment를 쓴다 router.js URL의 router가 바뀔떄다르게 ..
[생활코딩] 5# 리액트 공부
state 와 props 의 차이점 Props Read only 이다 수정할수 없다 따라서 컴포넌트 내부에서 변경하려한면 에러가 뜬다 render(){ this.props.title = "hi"//error return( {this.props.title} {this.props.desc} ) } CRUD CRUD 를 위한 버튼들을 만들어 주도록 하자 carete update Delete 의 경우는 link 의 개념으로 잡는데아닌 오퍼레이션의 기능을 하는 버튼을 만들어야 한다 위의 컨트롤 부분 소스를 다른 컴포넌트 js 파일로 분리 시키자 import React,{ Component } from 'react'; import logo from './logo.svg'; import TOC from "./comp..
[생활코딩] 4# 리액트 공부
컴포넌트 이벤트 이번에는 컨텐츠를 누르면 그 컨텐츠에 해당하는 정보를 읽을수 있도록 만들어준다 constructor(props){//랜더하기전에 초기화 해주고 싶은코드는 constructor 안에 써야한다. super(props); this.state = { mode:"read", selected_content_id :2, subject:{title : 'WEB', sub : 'world wide web'}, welcome: {title: 'welcome',desc: 'welcome react'}, contents :[ {id : 1, title : 'HTML', desc : 'HTML is for ...'}, {id : 2, title : 'CSS', desc : 'CSS is for ...'}, {i..
[생활코딩] 3# 리액트 공부
바인드 엮는다 묶어준다는 뜻 바인드를 쓸때 render 라는 함수가 호출될때 this 는 컴포넌트 자신을 가리킨다. render(){ var _title, _desc = null; if (this.state.mode === "welcome") { _title = this.state.welcome.title; _desc = this.state.welcome.desc; } else if (this.state.mode === "read") { _title = this.state.contents[0].title; _desc = this.state.contents[0].desc; } return ( {/* */} {this.state.subject.title} {this.state.subject.sub} ); }..
[생활코딩] 2# 리액트 공부
component 파일 나누기 import React,{ Component } from 'react'; 와 같이 component 를 로드한다음 extends class TOC extends Component{ render(){ return( HTML CSS JavaScript ) } } export default TOC; 해야한다 그후 export default TOC; 로 내보내 준다라고 알려줘야함 Props 와 state Props 사용자에게 중요한거고 프롭스에게 밸류를 줘서 조작할수있다 state 로직을 구현하기 위한것 내부적으로 존재하고 외부에 나타나면 안된다. 좋은 컴포넌트를 만들어 주기 위해서2개를 각각 철저하게 분리해줘야한다. constructor(props){//랜더하기전에 초기화 해주고..