yeji

React 코드 주석은 javascript 와 동일하게 한 줄 주석은 // 로, 여러줄은 /* */ 로 처리한다. 반면 React JSX 코드 주석은 {/* 주석연습 */} 주석을 {}로 감싸준 형태로 사용한다.

chrome 웹스토어에서 'React Developer Tools' 확장 프로그램을 설치한 다음 브라우저를 닫았다가 다시 열면 오른쪽 상단에 아이콘이 추가되는데!... react로 만든 웹페이지를 개발자도구로 보면 element에서는 일반 태그들만 보이고 우리가 작성한 자바스크립트 코드 자체는 보이지않는데, 그럴 때 components 탭을 클릭하면 우리가 만든 컴포넌트를 보여준다. 값을 변경하면 바로 반영되어 브라우저에 표시되기도 한다!

컴포넌트를 만들어서 복사하면 똑같은 결과를 얻을 수 있다. Class Subject extends Component { render() { return ( {this.props.title} {this.props.sub} ); } } Class App extends Component { render() { return ( ..... this 뒤에 있는 props는 리액트에서 속성값을 나타내는 키워드. props 뒤 title에는 원하는 값을 사용한다. 이 코드가 더 효율적인 이유는 Subject 컴포넌트는 원래 언제나 똑같은 값을 보여주는 컴포넌트였는데, 다음과 같이 title과 sub를 바궈서 작성하면 이 title의 값과 sub의 값이 Subject라는 컴포넌트의 입력 값이 되어서 그에 따라 달라지는 ..