Study
-
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..
-
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를 사용할 수 있다...
-
stateStudy/React 2020. 5. 27. 14:14
state Dynamic information 은 변할 수 있는 정보이다. 리엑트 컴포넌트는 렌더하기위해서 다이나믹정보가 종종 필요할것이다. 예를들어, 농구게임의 스코어를 보여줄 컴포넌트를 상상해봐라. 게임의 스코어는 시간에 따라 변하며, 이것은 스코어가 dynamic하다는 것을 의미한다. 우리의 컴포넌트는 유용한 방법으로 렌더하기 위해서 다이나믹 정보의 조각인 스코어를 알아야 할 것이다. 컴포넌트가 동적정보를 얻기 위한 두가지 방법이 있다. : props 와 state props와 state 제외하고 컴포넌트에 사용되는 모든 값은 항상 정확하게 같음을 유지해야한다. 당신은 props에 대해 긴 레슨동안 배웠다. 지금은 state에 대해 배울 차례이다. props와 state는 interating한 리엑..