분류 전체보기 (47) 썸네일형 리스트형 생활코딩 React3(Create) 필기 보호되어 있는 글입니다. #6 Create 구현(~form) (필기) 모든 웹 어플리케이션은 CRUD에 의존한다. Create를 알아보자. mode를 바꾸는 방식으로 갈꺼임 URL에 /create를 붙이는 식이다. 컴포넌트를 만들고 onchangemode 핸들러를 만들고 라우팅된 각각의 링크들을 클릭했을 때 mode가 바뀌게 한다. /create에서는 props.onchangemode를 넣어서 명시한다. onChangeMode라는 이벤트는 mode(현재 상태)를 인자로 받는다. 이렇게 해서 mode가 바뀌게 된다. form은 정보를 전송하는 녀석이다. html과 똑같다. create 컴포넌트에 form을 넣고 기존에 하던 방식으로 input-submit 방식을 취하면 된다. 이 때 onSubmit 이벤트를 써서 submit이 눌렸을 때 기능을 구현한다. onsub.. #5 Event (필기) 기본적으로 state와 props의 변경은 render()의 호출을 일으킨다. 가장 기본적인 형태의 이벤트(상황에 따라 정적으로 컴포넌트를 render)는 메인 컴포넌트 상단의 조건문에 mode에 따른 분기(ex : welcome, read)를 만들고 매 액션마다 props(혹은 state)를 수동으로 바꾸는 것이다. 이와같은 방식은 매우 원시적이며 우리가 하고자 하는 Event 와는 거리가 멀다. 그렇다면 이를 사용자 액션에 따라 동적으로 만들고자 한다면 어떻게 해야할까? -> JavaScript preventDefault onclick의 경우 우리가 알고있는 JS형태로 사용하면 안된다. React Application은 JSX를 기반으로 하기 때문이다. JSX에서 onclick은 c를 대문자.. 8] React Event 1. Event 저번의 페이지에서 이제는 이벤트를 적용해보자. 원래의 페이지는 소제목2 에잇 몰라> 소제목3 생활코딩 React2(Event) 필기 보호되어 있는 글입니다. GitHub Branch 만들기 branch 작업을 해보는 연습을 해보려고 한다. 원래 쓰던 로컬 폴더에서 우클릭을 하고 나서 git bash를 불러오고 먼저 현재 브랜치를 확인했다. 브랜치는 만들어 진 것이 없으니 당연히 처음에는 master로 구성되어있다. master에서 브랜치를 만들고 전환하기 위해 다음과 같은 명령어를 사용하였다. git branch git checkout 각각의 명령어는 브랜치를 생성한 뒤에 브랜치를 전환하는 명령어이다. 혹시 현재 위치하고 있는 브랜치의 이름이 궁금하다면 아래의 명령어를 입력하여 확인해보면 된다. git branch 간단하게 브랜치를 생성하고 변경하는 것을 해보았다. 그리고 브랜치를 생성한 다음은 원래 하던 것처럼 변경된 파일을 하나 만든 다음 git add * git commit -m "m.. 컴포넌트 이벤트 만들기 이전에는 그냥 태그 안에 코드를 넣어서 단순히 사용하는 방식을 사용했다. 하지만 이번에는 컴포넌트를 이용해서 정리해보는 시간을 가졌다. 이미 Subject라는 컴포넌트는 다른 곳에 만들어두었고, subject 컴포넌트는 아래와 같다. 우선 Subject.js를 살펴보자. 그러면 이전에 한 곳에 만들었었던 onclick 이벤트를 사용해서 기존의 이벤트를 막는 preventDefault()를 사용한 다음, this.props.onChangePage() 함수를 사용하여 이 onChangePage 함수를 실행할 수 있도록 한다. 그리고 뒤에는 이 컴포넌트 객체 자신을 가리킬 수 있도록 함수 뒤에 .bind(this)를 추가해준다. 그리고 나서 다시 App.js를 살펴보자. Subject 컴포넌트를 물러온 모습이.. 7] React State 1. State 입문자에겐 State와 props의 차이를 이해하기 어렵다. (물론 나도) 어떤 제품이 있을 때, 사용자의 UI들이 리액트의 관점에서는 props이다. 반대로 내부적인 구현을 위해 상태를 다양하게 바꿀 수 있는 것을 state라고 한다. 즉 개발자의 입장에서는 state를 주목해야 한다. state는 props의 값에 따라 내부 구현에 필요한 것이라고 얘기할 수 있다. 사용자는 props를 통해 컴포넌트를 마음대로 조작할 수 있지만, state는 건드릴 수 없으며, 또한 알아서도 안된다. 옆의 그림처럼 내부 state는 철저히 분리되어있다. 2. State 사용 App.js를 보면, App컴포넌트 안에 Subject라는 하위 컴포넌트가 존재한다. Subject 안에 있는 props들을 s.. bind 함수와 setState 함수 이해하기 오늘 강의는 bind 함수와 setState 함수 이해하기에 대해 다뤘다. 1. bind() bind, 묶어준다 라는 뜻. render()라는 함수가 호출될 때, this는 그 컴포넌트 자신을 가리킨다. 위는 콘솔에서 테스트를 한 것이다. 우선, obj라는 변수를 만들어서 특정 값을 준다. 그리고 나서 bindTest()라는 함수를 만들게 되는데, 이 함수에서 this.name을 출력하게 하고 싶다. 그러나 여기서 this라는 객체가 무엇인지는 정의가 전혀 되어있지 않다. 이렇게 했을 때 undefined가 뜨는 것은 당연하다. 이 this가 특정 개체를 가리키게 하고, 이 obj값의 name을 출력하게 하고 싶다면, this가 무엇인지를 설정하게 해줘야 한다. 그래서 위와 같이 bindTest의 함수에.. 이벤트 state props와 render 함수 역동적으로 만들어주는 기술인 이벤트에 대해서 공부를 하였다. 예를 들어 클릭한 것에 대한 화면을 표시할 곳이 매번 달라지고 화면 출력이 달라지는 경우. mode를 설정해주기 그 mode에 따른 살태와 값을 설정해주기 render() 함수가 다시 호출됨으로써 다시 화면을 출력하게 되는데, 이 때 일어나는 이렇게 이벤트를 만드는 것이 목표임. porps와 state가 바뀌면 다시 함수가 호출 되게끔 만들어야 한다. 1. mode를 설정하고, 그 mode가 되었을 때 설정되는 props 값이라던지 state 값을 따로 설정해준다. 2. 그리고 if 문을 통해서 mode가 원하는 조건에 충족되었을 때, 어떤 값들을 바꾸게 될 것인지 설정해준다. 3. 이 값이(props나 state 값) 바뀌면 render() .. 이전 1 2 3 4 5 다음
