반응형 웹서비스 개발/React-App 개발17 컴포넌트 이벤트 생성 Subject 컴포넌트 수정 - 대상 컴포넌트에 onChangePage 함수를 사용한다. - onChangePage를 실행시키는 메소드를 대상 컴포넌트에 사용한다. App.js에서 render()의 Subject 부분 Subject.js에 onChangePage를 아래와 같이 만든다. class Subject extends Component{ render(){ return ( {this.props.title} {this.props.sub} ); } } TOC 컴포넌트 수정 App.js에서 render()의 TOC부분 TOC.js의 list 부분 lists.push({data[i].title}); 을 다음과 같이 수정 lists.push( {data[i].title} ); 위와 같이 바꾸었다면 Web 버튼.. 2021. 4. 30. Event 2. Bind & setState Bind - 위 예를 보면 bindTest() 함수는 아무 출력 결과물이 없다. - 하지만 bind를 사용하면 강제로 bindTest에 인자를 집어넣어 준다. - 따라서 위와같이 bindTest2는 egoing이 출력되는것을 볼 수 있다. - funcname.bind(this) = component 자체를 가리켜 함수 안으로 주입해 준다. setState - 생성자(constructor)에서 선언하는 것은 기존에 하던 방식으로 선언하면 된다. - 하지만 컴포넌트가 생성이 끝난 다음에 동적으로 변경할때에는 기존의 방식으로 하면 바뀌지 않는다 예) this.state.mode = 'welcome' - this.setState({mode:'welcome'}) 을 사용해야 정상적으로 작동한다. 2021. 4. 30. Event - 링크를 클릭하면 다른 메시지가 출력되도록 함. - React 에서는 Props나 State값이 바뀌면, 그 state를 가지고 있는 컴포넌트의 render 함수가 다시 호출된다. - 아래는 event의 설치와 event의 기본적인 동작을 방지하는 code 이다. //App.js 중에서 render() render() { console.log('App render') var _title, _desc = null; if (this.state.mode === 'welcome'){ _title = this.state.welcome.title; _desc = this.state.welcome.desc; } else if (this.state.mode === 'read'){ _title = this.state... 2021. 4. 27. State 개발 State 제품을 조작하는 입장과 구현자의 입장이 있다. Props : 부모 컴포넌트가 자식 컴포넌트에게 주는 값. 읽기 전용 State : 컴포넌트 내부에서 선언하며 내부에서 값 변경을 가능. 컴포넌트 내부적으로 사용하는 정보. 예를들면 제품의 전선 등 밖에서 보여서 안되는 물건을 뜻한다. 첫번째로 어떠한 컴포넌트가 실행 될 때 render 함수보다 먼저 실행되면서 컴포넌트를 초기화 시켜주고 싶은 코드는 constructor(props){ super(props); } 해당하는 코드블럭 안에 작성한다. App.js의 state로 선언된것을 하위 props에서 불러오는것은 아래 코드처럼 가능하다. class App extends Component { constructor(props){ super(props.. 2021. 4. 26. Component를 파일로 분리하기 이전에 컴포넌트들을 App.js에 모두 집어너었다. 이런 방식이면 다른곳에서 필요할 때 사용하기 어렵기 때문에 컴포넌트를 따로 파일로 분류시키고자 한다. App.js에 있던 class를 파일화 시켜주기 위해 새로운 TOC.js라는 파일을 생성한다. 이 뒤에 TOC.js에 컴포넌트를 사용하기 위한 class 를 import 해주어야 한다. import React, {Component} from 'react'; 가져올 컴포넌트 클래스를 복사한 후 마지막엔 외부에서도 사용 가능하게 하기 위한 코드를 삽입한다. export default TOC; 분리한 TOC.js의 모습은 아래와 같다. import React, {Component} from 'react'; class TOC extends Component {.. 2021. 4. 25. Props & React Developer Tools Props 전 시간에서 class 를 왼쪽과 같이 작성한다면, 계속 똑같은 내용밖에 출력하지 못한다. 똑같은 컴포넌트가 필요한 경우는 유용하게 사용할 수 있지만, 구조만 같고 다른 내용이 필요할 땐 유용하지 못하다. 따라서 Props 기능을 이용해 효율적으로 사용할 수 있다. 위와같이 한다면 페이지는 아래와 같이 변화하게 된다. React Developer Tools 웹페이지에서 Elements 로 웹페이지를 확인 시, React로 구성한 class를 확인할 수 없는 불편함이 있다. 아래의 크롬 확장프로그램을 설치한다면, React로 구성된 class를 확인할 수 있다. React Developer Tools Adds React debugging tools to the Chrome Developer To.. 2021. 4. 24. 이전 1 2 3 다음 반응형
