본문 바로가기

WEB44

[React] CRUD를 곁들인,,, (Create) create 어떻게 리액트를 통해서 create를 할 것 인가?! 해볼 것은? 간단하게 입력 폼을 만들고 입력된 것을 받아서 본문 내용에 표시할 것이다. 이것이 생성 기능이다. 목록에 create, update, delete 을 만들어준다. 이 코드를 Conrtorl.js로 빼주고 App.js에 import 해주었다. Control 컴포넌트에서 목록 중 하나를 클릭했을 떄의 동작을 만들기 위해서 이벤트를 정의할 것이다. onChagneMode라는 핸들러가 실행되게 할 것이다 (이벤트가 실행됐을 때 실행되어야 할 함수를 핸들러라고도 한다.) 각각의 목록을 클릭하면 onChangeMode를 인자로 현재 누른 목록의 이름을 인자로 호출한다. onChangeMode에서는 이 인자를 받아서 현재 state의 mo.. 2021. 10. 11.
[React] 이벤트, state 파고들기 이벤트를 사용해봤는데, 우리의 태그에 이벤트를 만들어서 그 태그, 컴포넌트를 사용하는 사람들이 이벤트 프로그래밍을 할 수 있도록 해본 적은 없다. 이벤트의 생산자가 되어볼 차례! 라는 코드는 원래 subject.js 안에 있던 코드이다. 지금은 subject.js 파일을 주석처리하고 내용을 바깥쪽으로 옮겨놓은 상태이다. 이제 이 코드를 비활성화하고 subject 컴포넌트 주석을 풀었다. subject라는 컴포넌트를 사용할 때, 사용자가 링크를 클릭했을 때의 이벤트를 설치하고 싶을 때 onChangePage라고 하는 이벤트를 쓰세요, 하고 거기에 함수를 설치해놓는다. 사용설명서에는a태그 클릭되었을 때 설치한 함수를 실행해드릴게요 라고 적어놓는다. 정리) 우리가 만드려는 subject 컴포넌트는 onchan.. 2021. 10. 7.
[React] event에서 state 변경 (feat. bind, setState) state를 세팅해놓은 작업과 event를 설치한 작업을 연결시킬 것이다. 하려고 하는 것! WEB이라는 글씨를 누르면 App이라는 컴포넌트의 값을 mode로 바꾸고 싶다. e.prevenDefault 아래에 this.state.mode= 'welcome' 을 쓰면 오류가 나는데 여기에는 두 가지 에러를 포함하고 있다. 1. event가 호출됐을 때 실행되는 함수 안에서는 this의 값이 컴포넌트 자기 자신을 가르키는 것이 아니라, 아무 값도 셋팅되어있지 않다. => 해결방법: 함수가 끝나는 직후에 .bind(this) 를 추가해서 함수 안에서 this는 우리의 컴포넌트가 될 수 있도록 한다. 2. 하지만 코드를 작성하고 WEB을 눌러도 welcome 모드로 바뀌지 않는데 => 이유는 리액트는 state.. 2021. 10. 7.
[React] event 애플리케이션을 역동적으로 만들어줄 기술인 event를 살펴볼 것이다. props, state, event 이 세 개가 상호작용하면서 웹 페이지를 역동적으로 만든다. 링크에 이벤트를 설치해서 클릭하면 그에 따라서 App 컴포넌트의 state가 바뀌고 바뀐 state가 이 content 컴포넌트의 props 값으로 전달되면서 동적으로 애플리케이션을 바꾼다. 현재 우리가 보고있는 페이지의 상태를 구분하기 위해서 state에 mode라는 값을 주었다. 기본값으로 welcome을 주었고 welcome 모드일 때 content 영역에 표시할 텍스트도 지정해주었다. 리액트에서는 state 값이 바뀌면 그 state를 가지고 있는 컴포넌트의 render함수가 다시 호출된다. 다시 호출되면서 render 함수 하위의 컴.. 2021. 10. 4.

티스토리툴바