컴포넌트 (2) 썸네일형 리스트형 <리액트 기초> 메서드와 함수형 setState 이번 장에서는 간단한 구구단 게임을만들며 리액트의 기능들을 학습했다. 질문이 각 1부터 9까지 숫자로 랜덤으로 나오고 답을 입력한다. 입력버튼을 누르면 틀리면 땡, 정답이면 정답이라는 문자와 답을 출력하고, 다음 문제가 위에 새로 뜨게 된다. 먼저 지난 장에서와 같이 헤드에 리액트, 리액트돔, 바벨을 넣는다. 그리고 div태그로 root를 만들어준다. class GuGuDan extends React.Component { constructor(props) { super(props); this.state = { ... }; } onSubmit=(e) => { ... }; onChange=(e) => ...; input; onRefInput = ...; render() { return ( ... ); } }.. <리액트 기초> 리액트 컴포넌트 이번 장에서는 리액트를 통해 간단한 컴포넌트를 만들어 보았다. 리액트는 컴포넌트라는 객체를 통해 비슷한 형식을 매우 간단하게 불러와서 보여줄 수 있다. 게다가 변화가 있더라도 페이지의 새로고침없이 원하는 부분만 변화시키며 사용자의 경험을 더 좋게 만들 수 있다. 먼저 헤드부분에 리액트와 리액트 돔을 불러왔다. 바벨은 후에 있을 JSX문법때문에 불러왔다. 참고로 개발환경에서는 .development.js를 사용하지만 배포후에는 production.js로 변경한다. body에는 리액트돔으로 넣어줄 태그들이 들어갈 root div를 만들어 둔다. 먼저 컴포넌트가 들어가는 스크립트를 만들었다. 아래에 html태그와 비슷한 구문이 있는데 이것은 javascript와 xml을 합친 JSX이다. 이것을 사용하기 위해.. 이전 1 다음
