Study/React
-
컴포넌트 간 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..
-
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한 리엑..
-
defaultPropsStudy/React 2020. 5. 27. 13:36
defaultProps 컴포넌트 클래스 Button을 살펴보아라. import React from 'react'; import ReactDOM from 'react-dom'; class Button extends React.Component { render() { return ( {this.props.text} ); } } // defaultProps goes here: ReactDOM.render( , document.getElementById('app') ); 8번째 줄에서, Button은 text로 이름된 prop을 받을 것이라 예상한다. 받은 text는 엘레먼트의 내부에 보여질 것이다. 만약 아무도 Button에 text를 전달하지 않는다면? 만약 아무도 Button에 text를 전달하지 않는다면..
-
this.props.childrenStudy/React 2020. 5. 27. 13:25
this.props.children 모든 컴포넌트의 props 객체는 children이라고 이름된 property를 가진다. this.props.children은 컴포넌트의 오프닝과 JSX태그들 클로징 사이에서 모든것을 리턴할 것이다. 지금까지, 같이 당신이 봐온 모든 컴포넌트들은 self-closing tag들이었다. 그들은 그럴필요는 없다! 당신은 라고 적을수도 있고, 이것은 여전히 동작할 것이다. this.props.children은 사이에서 모든것들을 리턴할것이다. BigButton.js를 보자. Example1에서 의 this.props.children은 “I am a child of BigButton.” 텍스트와 같다. Example2에서 의 this.props.children은 컴포넌트와 같..
-
handleEvent, onEvent, and this.props.onEventStudy/React 2020. 5. 27. 13:09
handleEvent, onEvent, and this.props.onEvent 네이밍에 대해 이야기 나눠보자. 당신이 막 만든 event handler 를 prop로써 전달할 때, 당신이 선택해야할 두 name이 있다. 두 가지 네이밍 선택은 모두 부모 구성 요소 클래스, 즉 이벤트 핸들러를 정의하고 이를 전달하는 컴포넌트 클래스에서 이루어진다. 당신이 선택해야하는 첫번째 이름은 이벤트 핸들러 고유의 이름이다. Talk.js 6~ 12번째 줄을 보아라. import React from 'react'; import ReactDOM from 'react-dom'; import { Button } from './Button'; class Talker extends React.Component { talk()..