전체 글 (21) 썸네일형 리스트형 블로그 플렛폼을 옮겼습니다! 공부하는 내용과 프로젝트 내용 계속 업데이트 할 예정이니 구경해주세요! https://velog.io/@rjsdnql123 내가 이해하기 힘들어 쉽게 풀어쓴 react-redux connect 사실 최근까지 redux를 왜 사용하는지 이해하지 못했었다. react만 이용해도 충분히 state관리가 편하게 되는 줄 알았는데 그건 내 큰 착각이었다. 지금 코드스테이츠에서 4주 프로젝트를 하며 state 관리하는 라이브러리가 필요하다가 절실히 느꼈고 redux를 도입하면서 connect도 한번 사용해 봤다. 이 글은 리덕스에 어느정도 관심이 있고 기본적인 플로우를 이해하고 있다고 가정하에 작성하겠습니다. connect 정말 많은 글을 참고 하였고 많은 영상을 보고도 이해 안 가 수십 번 돌려본 저의 connect의 사용법을 가장 쉽게 풀어 쓰겠습니다. 먼저 connect 란 react-redux의 하나의 함수이다. 주로 container 컴포넌트를 생성할 때 사용하는 것을 추천합니다. connect.. HTTP 트랜잭션 해부 이 글의 목적은 node.js HTTP 처리 과정을 잘 이해하기 위해서 하는 것이다. 언어나 프로그래밍 환경에 관계없이 상식선에서 HTTP 요청이 어떻게 동작하는지 알고 있어야 한다. 서버 생성 const http = require('http'); const server = http.createServer((request, response) => { //서버를 생성한다 }); HTTP 요청이 서버에 오면 node가 트랜잭션을 다루려고 request와 response객체를 전달하며 요청 핸들러 함수를 호출한다. 요청을 처리하려면 listen메서드가 server객체에서 호출 되어야 한다. 대부분 서버가 사용하고 하는 포토 번호를 listen에 전달하기만 하면된다. 메서드,URL,헤더 요청을 처리할 때, 우선.. Redux(리덕스)의 기초(리듀서,스토어,액션) 리듀서란? 액션에서 무언가 일어난다는 정보를 가져오면 그 결과 애플리케이션의 상태가 어떻게 바뀌는지 리듀서 에서 설계할수 있다. 리듀서는 애플리케이션의 모든 상태는 하나의 객체에 저장된다. 절대로 리듀서 내에서 하지 말아야 할 것들 인수들 을 변경(mutate)하기. API 호출이나 라우팅 전환같은 사이드이펙트를 일으키기. Date.new()나 Math.random()같은 순수하지 않은 함수를 호출하기. **참고: 순수함수란? 간단하게 말하면 같은 값을 넣었을 때 값이 일정하게 나오는게 순수함수라고 할수 있다. 간단한 리듀서 함수 예제를 가져와 보았다. 하나하나 어떤 기능을 하는지 알아보자 리듀서는 반드시 state값을 직접 변경해주는 것이 아니라 새로운 객체를 복사해 action값을 넣어주어야 한다. .. 리액트(React)의 기초. props, state, component,setState,lifeCycle 리액트(React)란? 리액트는 페이스북에서 제공하는 JavaScript 프론트엔드 라이브러리이다. 리액트를 왜? 사용하는가? HTML과CSS를 이용해서 얼마든지 웹사이트를 만들수 있는데 리액트를 왜 사용하는가? HTML과 CSS등으로만 만들어진 웹사이트는 동적인 데이터를 UI에 뿌려주기에 적합하지 않다. 이러한 문제점을 리액트를 이용한다면 사용자와 상호작용하는 UI를 쉽게 만들어 낼수 있다. 컴포넌트 리액트를 사용할 때는 컴포넌트를 class 또는 함수로 정의할수 있다. class로 정의된 컴포넌트는 state와 setState를 사용할 수 있다. 최근 함수형 컴포넌트도 Hook을 이용해 state를 사용할수 있게 되었다. *그러면 굳이 함수형으로 만들지 않고 전부다 class로 만들면 되지 않을까 하.. React혼자볼거 정리 React 엘리먼트를 루트 DOM 노드에 렌더링하려면 둘 다 ReactDOM.render()로 전달하면 됩니다. const element = Hello, world; ReactDOM.render(element, document.getElementById('root')); 위 코드를 실행하면 화면에 “Hello, world”가 보일 겁니다. 렌더링 된 엘리먼트 업데이트하기 React 엘리먼트는 불변객체입니다. 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없습니다. 엘리먼트는 영화에서 하나의 프레임과 같이 특정 시점의 UI를 보여줍니다. 지금까지 소개한 내용을 바탕으로 하면 UI를 업데이트하는 유일한 방법은 새로운 엘리먼트를 생성하고 이를 ReactDOM.render()로 전달하는 .. React - State state는 내부에 구현에 필요한 데이터를 말한다. 3.State: 컴포넌트가 갖는 상태. 객체의 형태로 컴포넌트 내에서 보관한다. 1.class 컴포넌트로 작성되어야 한다. 값을 변경할땐 반드시 setState메서드를 사용해야함 state 값 변경(setState메서드 사용) ㄴ render()함수가 재실행 사용자에게 알필요도 없고 알아서도 안되는 것을 state라고 함 import React, { Component } from 'react'; import './App.css'; class Content extends Component{//props를 사용하지 않음 render(){ return ( HTML HTML is HyperText Markup Language. ); } } class Subje.. React, Props props: 상의 컴포넌트가 하위 컴포넌트에게 내려주는 데이터이다. props는 단순히 사용만 할 수 있고 변경은 할수 없다. import React, { Component } from 'react'; import './App.css'; class Content extends Component{//props를 사용하지 않음 render(){ return ( HTML HTML is HyperText Markup Language. ); } } class Subject extends Component {//props 사용 render(){ return ( {this.props.title} {this.props.sub} ); } } class App extends Component { render() { ret.. 이전 1 2 3 다음
