⭐ 컴포넌트컴포넌트란, 특정 코드 뭉치를 다른 부분에 이식하거나 재사용하기 위해 사용하는 코드 블록 단위컴포넌트를 파일 단위로 작성한 후, 필요한 위치에서 로드해서 사용할 수도 있습니다.1. 컴포넌트 조합하기단계 1class Component2 extends React.Component { render() { return ( This is imported Component. ); }}class Component1 extends React.Component { render() { return ( React Example ); }}root.render ( )단계2class Component2 extends React...
⭐ 컴포넌트컴포넌트는 화면을 구성하는 구성 요소를 의미합니다.1. 컴포넌트는 개별적인 속성을 정의할 수 있다.ReactDOM에서 호출된 컴포넌트에서 전달한 속성은 {this.props.propsValue} 방식으로 전달 받습니다. props는 속성인 Properties의 약어입니다.this는 HelloReact 컴포넌트를 의미합니다. 이를 바인딩(binding)이라 합니다.전달받은 속성은 중괄호를 사용해서 렌더링하며, 이런 방식을 JSX의 표현식이라 합니다.class StudyReact extends React.Component { render() { return ( Study React {this.props.type} ) }}root.rende..
⭐ React의 기본 사용 메서드 1. React.createElement()태그 구성 요소를 생성하는 메서드 React.createElement( type, [props], [ ... children] ); type : 태그 이름 문자열, React 컴포넌트[props] : React 컴포넌트에 넣어주는 데이터 객체[ ... children] : 자식으로 넣어주는 요소들사용 예시root.render( React.createElement( "h1", null, "Hello React!!" ));실제 렌더링 결과 Hello React
★ JAVASCRIPT 로 CSS 조작하기 불편한 방법 //BOM // box.style = 'font-size : 2rem;'; //DOM // box.setAttribute('style', 'font-size : 3rem;'); //관리 불편;; > 모든걸 문자열로 조작 box.style = 'backgroud-color : black; color : white; font-size : 3rem;'; 유용한 방법 box.style.color = 'blue'; box.style['color'] = 'white'; box.style.backgroundColor = 'black'; box.style['background-color'] = 'white'; box.style['font-size'] = '3rem..
