반응형 component4 [React] Context Context란? React에서 Context는 컴포넌트 간에 데이터를 공유하기 위한 메커니즘으로 Context를 사용하면 중간에 있는 컴포넌트들을 건너뛰고, 프로퍼티를 하위 컴포넌트로 직접 전달하지 않고도 데이터를 전달할 수 있습니다. Context를 사용하면 상위 컴포넌트에서 데이터를 생성하고, 하위 컴포넌트에서 이 데이터를 사용할 수 있는데, 이를 통해 컴포넌트 트리 전체에서 동일한 데이터에 접근할 수 있게 됩니다. Context를 사용하려면 먼저 React.createContext() 함수를 사용하여 Context 객체를 생성해야하고, Context 객체의 Provider 컴포넌트를 사용하여 데이터를 제공하고, Consumer 컴포넌트를 사용하여 데이터를 소비할 수 있습니다. Provider 컴포.. 2024. 2. 20. [React] Component 합성과 추출 1. Component 합성 Component 안에 또 다른 Component를 쓸 수 있어 복잡한 화면을 여러개의 Component로 나눠서 구현 가능 App Component안에 세 개의 Welcome Component를 생성 function Welcome(props) { return Hello, {props.name}; } function App(props) { return ( ) } ReactDOM.render( document.getElementById('root') ); 2. Component 추출 - 큰 Component를 조각내어 새로운 Component를 생성 - 재사용성, 개발속도 증가에 좋음 아래의 Component를 여러개의 Component로 추출해보겠습니다. function Co.. 2024. 1. 26. [React] Component 만드는법 및 렌더링 1. Component - Component는 초기버전에서는 Class Component를 주로 사용했지만 불편하다는 의견이 있어 이후에는 Function Component를 개선하여 사용 - 개선하는 과정에서 만들어진것이 Hook 2. Function Component function Welcome(props) { return Hi, {props.name} } 3. Class Component - 함수를 상속받아서 자식을 만듦 class Welcome extends React.Component { render() { return Hi, {this.props.name}; } } * Component 이름은 항상 대문자로 시작 // HTML div 태그로 인식 const element = ; // Welc.. 2024. 1. 25. [React] Component 와 Props 의 정의 1. Component JavaScript function 처럼 React Component도 입력값을 받아 출력합니다. Javascript의 function과 약간의 차이점이 있지만, 입력과 출력의 가운데에 있다는 점을 기억해주시면 됩니다. React Component의 입력은 Props 이고, 출력은 React Element 입니다. 2. Props - Properties(속성)이라는 단어의 줄임말 - Props는 Components에 전달할 다양한 정보를 담고있는 JavaScript 객체 - Props는 읽기전용(Readonly) - 모든 React Component는 Props를 직접 바꿀수없고, 같은 Props에 대해서는 항상 같은 결과(React Element)를 보여줘야 한다. 모든 Reac.. 2024. 1. 25. 이전 1 다음 반응형
