분류 전체보기
-
Child Components Update Their Parents' stateStudy/React 2020. 6. 1. 21:35
지난 레슨에서, 여러분은 stateful한 부모 컴포넌트에서 stateless한 자녀 컴포넌트로 정보를 전달했다. 이번 레슨에서는, 당신은 패턴을 좀더 확장할 것이다. stateless한 자녀 컴포넌트는 부모 컴포넌트의 state를 업데이트할 수 있다. 이것이 어떻게 동작하는가 1. 부모 컴포넌트 class는 this.setState()를 호출하는 메소드를 정의한다. 예를들어, Step1.js의 .handleClick()메소드를 보아라. //Step1.js import React from 'react'; import ReactDOM from 'react-dom'; import { ChildClass } from './ChildClass'; class ParentClass extends React.Comp..
-
Don't Update propsStudy/React 2020. 6. 1. 21:10
잘했다! 여러분은 stateful한 컴포넌트에서 stateless component로 정보를 전달했습니다. 여러분은 이것으로 많은 것을 할것입니다. 여러분은 this.setState()를 호출함으로써 state를 변화시킬 수 있다는 것을 배웠습니다. 당신은 궁금해할 수 도 있어요 : 그렇다면, porps도 컴포넌트가 변화시킬 수 있는거 아냐? 대답은 : 아닙니다!! 컴포넌트는 this.props를 절대 업데이트 할 수 없습니다. 절대 해서는 안되는 나쁜 예를 봅시다. import React from 'react'; class Bad extends React.Component { render() { this.props.message = 'yo'; // NOOOOOOOOOOOOOO!!! return {thi..
-
component State (부제. state와 props의 차이점)Study/React 2020. 6. 1. 20:30
State와 props의 차이점은 무엇인가? props("properties"의 줄임말)와 state는 일반 JS객체이다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 가지고 있으나, 한 가지 중요한 방식에서 차이가 있다. props : (함수 매개변수처럼) 컴포넌트에 전달됨. state: (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됨. 더 자세히 알아보자. Props props는 properties의 줄임말로써, Component로 데이터를 전달한다. render ( Hello movies! {this.props.title} ) class MoviePoster extends Component { render() { return ( {this.props.posterUrl} ); } } 위 코..
-
컴포넌트 간 state 주고받기Study/React 2020. 6. 1. 19:53
import와 export를 통해, 컴포넌트 간의 state 정보를 주고 받을 수 있다. //Parent.js import React from 'react'; import ReactDOM from 'react-dom'; import { Child } from './Child'; class Parent extends React.Component { constructor(props) { super(props); this.state = { name: 'Frarthur' }; } render() { return ; } } ReactDOM.render(, document.getElementById('app')); //Child.js import React from 'react'; export class Child..
-
Json이란 무엇인가.Study/JavaScript 2020. 6. 1. 10:09
HTTP 브라우저 위에서 동작하고 있는 웹사이트와 웹어플리케이션과 같은 클라이언트들이 어떻게 서버와 통신할 수 있는지 정의한것이 바로 http(Hypertext Transfer Protocal)이다. 즉, 어떻게 하이퍼텍스트들을 주고 받을 수 있는지를 규약한 프로토콜의 하나이다. http는 클라이언트가 서버에게 request 요청할 수 있고, 서버는 요청한 것에 따라서 그에 맞는 reponse 응답을 클라이언트에게 보내준다. 또한 여기서 말하는 Hypertext는 하이퍼링크들만 얘기하는 것이 아니라 전반적으로 쓰여지고 있는 리소스들, 문서나 이미지 파일들 이런아이들을 다 포함해서 말한다. 이렇게 http를 이용해서 서버에게 데이터를 요청해서 받아올 수 있는 방법으로는 바로 AJAX가 있다. AJAX As..
-
고통과 연단의 반짝이는 값진 결과물개발일기 2020. 5. 31. 16:49
요새 개발 공부를 하면서, 공부해야할 방대한 양에 그리고 비슷하게 시작한 것 같은데 나보다 훨씬 잘하는 다른 개발자들을 보며.. 좌절과 압박감에 시달렸다. react를 하고 있으면 더 깊이 공부하지 못한 JS가 생각나고, git공부를 하고있으면, 그동안 관리하지못한 잔디들이 생각이나고, 다시 JS를 하면 스터디원들과 이야기나누었던 또다른 공부자료들이 생각이 났다. 시간은 한정되어있고, 내 집중력은 짧은데, 내 욕심은 너무 커 결과는 'ERROR' 가 출력되는 것 같았다. 사실 나는 요새 피부알레르기로도 고통을 받고 있다. 그렇게 가고 싶었던 아프리카에서의 2년을 보내고, 나는 난치 알레르기를 얻었다. 약을 먹지 않으면 온 신경이 곤두서고, 약을 먹으면 계속해서 잠이 쏟아진다.. 주변 사람들이 '세네갈에 ..
-
Update state with this.setStateStudy/React 2020. 5. 27. 15:35
Update state with this.setState 컴포넌트는 자신의 state를 단지 읽는 것보다 더 많을 것을 할 수 있다. 컴포넌트는 자신의 state를 또한 변경할 수도 있다. 컴포넌트는 this.setState() 함수를 호출함으로써 자신의 state를 변경한다. this.setState()는 두 인자를 취한다. : object(컴포넌트의 state를 업데이트할)와 callback 당신은 기초적으로 콜백이 전혀 필요하지 않았다. 코드에디터에서, Example.js를 살펴보자. import React from 'react'; class Example extends React.Component { constructor(props) { super(props); this.state = { mood..
-
Access a Component's stateStudy/React 2020. 5. 27. 15:27
Access a Component's state 컴포넌트의 state를 읽기 위해서, 표현식 this.state.name-of-property를 사용해라. class TodayImFeeling extends React.Component { constructor(props) { super(props); this.state = { mood: 'decent' }; } render() { return ( I'm feeling {this.state.mood}! ); } } 위의 컴포넌트 클래스는 render 함수 안에 있는 state의 property를 읽을 수 있다. this.props와 같이, 당신은 컴포넌트 클래스의 body의 내부에서 정의된 어떤 property로부터 this.state를 사용할 수 있다...