웹 (26) 썸네일형 리스트형 리액트 bind(), state 수정, props에서 함수 만들기. 1. bind() bind()는 어떤 함수에서 this 값으로 특정 객체를 받고싶을 때 사용한다. 함수선언이 끝나는 부분이나 함수 이름 뒤에 .bind(원하는 객체이름)을 덧붙여주면 this 값을 매개변수에 넣은 객체로 받는 새로운 함수가 생겨난다. **또한 bind()는 인자를 여러 개 받을 수도 있다. bind(this, 인자1, 인자2) -> function(인자1, 인자2) 2. state 수정 state는 처음 초기화된 이후 쉽게 바꿀 수 없다. 반드시 위와 같은 함수를 이용해서만 바꿀 수 있다. setState()를 통해서 수정해야만 리액트가 state값이 변화된 것을 알고 render()를 재호출할 수 있다. 3. props에서 함수 만들기 리액트 state 1. 값이 한 개일 때. render() 함수 실행 전에 미리 초기화하고 싶은 코드는 constructor(props) 안에 작성한다. 이러한 내용은 this.state = { subject: {title: 'WEB', sub: 'World Wide Web'} } 와 같이 작성되고 이는 외부에서 접근이 불가능하다. 앱이 내부적으로 사용할 상태는 state라는 형태로 구현한다. ** 상위 컴포넌트인 App의 state를 하위 컴포넌트에 전달하고 싶을 때에는, 그것을 하위 컴포넌트의 props(속성) 값으로 넣어주면 된다. 2. 값이 여러 개일 때. 리액트에서는 props값이나 state 값이 변하면 해당 클래스의 render()가 다시 호출되도록 약속됨. 리액트 - 컴포넌트 파일로 쪼개기 js 파일을 만들고 Component를 import한 뒤 컴포넌트 클래스를 구현한다. export는 본 클래스의 사용 범위를 지정한다. 그리고 App 파일에 컴포넌트를 import해주면 끝 리액트 개발자 도구 크롬 웹 스토어에서 React Developer tools를 다운받으면 개발자도구에 Components 메뉴가 추가된다. 이를 통해 리액트 식으로 html 문서를 확인할 수 있고, 개발자 도구로 바로 props를 수정할 수도 있다.!! 리액트 컴포넌트 만들기 - 정리 도구. 위와 같은 것을 '리팩토링'이라 부른다. 드롭다운 목록 활용 드롭다운은 기본적으로 select 태그로 구현 JavaScript 글자 입력 양식 이벤트 사용자로부터 어떤한 입력을 받을 때 사용하는 요소를 입력 양식이라고 부른다.(예: input, textarea, button, select) JavaScript 이벤트 발생 객체 이벤트 리스너를 외부로 빼낸 경우, 어떻게 이벤트를 발생시킨 객체에 접근할 수 있을까? event.currentTarget 속성 사용 - 화살표함수와 일반 함수에 모두 적용 가능 this 키워드 사용 - 일반 함수에만 적용 가능 위와 같이 listener 메소드가 분리되면, 메소드 안에서 외부의 이벤트에 접근할 수 없기에 event.currentTarget 코드로 이벤트를 발생시킨 객체에 접근할 수 있게 만든다. 이전 1 2 3 4 다음
