close

React 기본 개념- Components, Props, State

1. Components

Components in은 React 재사용할 수 있는 독립적인 빌딩 블록입니다. 그것들은 더 작은 UI 요소로 나누어지고 결합되어 더 큰 components. 예를 들어 애플리케이션에는, 및 등 components 이 있을 수 있습니다. 각 구성 요소에는 고유한 책임이 있으며 해당 데이터를 수신 하고 표시할 수 있습니다. Header Sidebar Content props state

예:

// Functional Component  
function Greeting(props) {  
  return <h1>Hello, {props.name}!</h1>;  
}  
  
// Class Component  
class Greeting extends React.Component {  
  render() {  
    return <h1>Hello, {this.props.name}!</h1>;  
  }  
}

 

2. Props

Props in은 외부에서 React 전달된 값입니다. 부모에서 자식으로 components 데이터를 전달하는 데 도움이 됩니다. 읽기 전용이며 구성 요소 내에서 변경할 수 없습니다. 를 사용하려면 구성 요소의 속성에 값을 전달하고 UI 부분에서 사용합니다. components components Props props

예:

function Greeting(props) {  
  return <h1>Hello, {props.name}!</h1>;  
}  
  
ReactDOM.render(<Greeting name="John" />, document.getElementById('root'));

 

삼. State

State in React 은 구성 요소 내에서 변경할 수 있는 가변 데이터입니다. 각 구성 요소는 고유한 state 동적 데이터를 저장하고 관리할 수 있습니다. state 변경 되면 React 해당 사용자 인터페이스를 자동으로 업데이트합니다. State 클래스에서만 관리되며 components 구성 요소의 생성자에서 초기화됩니다. 를 업데이트하려면 state `set()` 메서드를 사용합니다 State.

예:

class Counter extends React.Component {  
  constructor(props) {  
    super(props);  
    this.state = { count: 0 };  
  }  
  
  increment() {  
    this.setState({ count: this.state.count + 1 });  
  }  
  
  render() {  
    return( 
      <div>  
        <p>Count: {this.state.count}</p>  
        <button onClick={() => this.increment()}>Increment</button>  
      </div>  
   );  
  }  
}