1. 컴포넌트에서 DOM 이벤트 사용 - 컴포넌트에서 출력된 특정 DOM 객체에 이벤트 컴포넌트가 동작하기 위해선 DOM이벤트 프로퍼티를 사용해야 한다. - 우리가 흔히 쓰고 있는 HTML 엘리먼트의 이벤트들은 JSX내에서 'on + 이벤트명' 형태의 프로퍼티로 제공된다. ex) 프로퍼티 샘플 이벤트 명 JSX DOM 이벤트 프로퍼티 이벤트 호출 시점 click onClick 엘리먼트에 마우스나 키보드가 클릭 된 경우 change onChange 엘리먼트의 내용이 변경된 경우 submit onSubmit 폼의 데이터가 전송될 때 keydown onKeyDown 키보드 버튼이 눌린 경우 ( 값 입력전에 발생하며, shift, alt, ctrl 등 특수키에 동작한다. ) (한/영, 한자 등은 인식불가) ke..

https://ko.reactjs.org/docs/state-and-lifecycle.html https://reactjs.org/docs/hooks-reference.html#usestate 1. state란? - 일반적으로, 컴포넌트의 내부에서 변경가능한 데이터를 관리해야할 때 사용 - 프로퍼티(props)의 특징 : 컴포넌트 내부에서 값을 바꿀 수 없음 값을 바꾸어야하는 경우 >> state를 사용 - 값을 저장하거나 변경할 수 있는 객체. 보통 이벤트와 함께 사용 됨 - 컴포넌트에서 동적인 값 >> state >>동적인 데이터를 다룰 때 사용됨 ※ 참고 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었다. 즉 State, Life Cycle 등등 이 없기 떄문에 클래스형..

binding이란? javascript의 함수는 각자 자신만의 this라는 것을 정의한다. 예를 들어 자기소개를 하는 함수를 만들기 위해 say()이라는 함수를 만든다고 하자. const say = function() { console.log(this); // 여기서 this는 뭘까? console.log("Hello, my name is " + this.name); }; say(); 실행해보면 window객체가 나타난다. 기본적으로 this는 window이기 때문이다. 사실 참 어려운게, 꼭 window라고만 말할 수는 없다. this는 객체 내부, 객체 메서드 호출시, 생성자 new 호출시, 명시적 bind시에 따라 바뀌기 때문이다. 어찌되었든 우리는 say함수에서 Window객체를 사용하고 싶지 않..

https://ko.reactjs.org/docs/components-and-props.html 1. 프로퍼티(props)란? - props(properties의 줄임말) - 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용(단방향 데이터 흐름) - 수정할 수 없음(자식입장에선 읽기 전용인 데이터) 2. 사용방법? - 프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용 한다. 1) 1개의 프로퍼티 넘기기 - 앞서 3개의 컴포넌트를 만들어 다음과 같은 화면을 구성하였다. (Header, Footer, Main) - 이와 같이 단순한 하드 코딩을 props를 통해 개선해 보자. - App 컴포넌트에서 Main컴포넌트에 "name"이라는 이름, "갓대희..

https://ko.reactjs.org/docs/components-and-props.html 1. 리액트 컴포넌트(Component)란? - 리액트로 만들어진 앱을 이루는 최소한의 단위 - 기존 웹 프레임워크 : MVC 방식으로 분리하여 관리하여 각 요소의 의존성이 높아 재활용이 어려움. 컴포넌트 : MVC의 뷰를 독립적으로 구성하여 재사용 가능, 새로운 컴포넌트 쉽게 만들 수 있음 - 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수. - 이름 : 항상 대문자로 시작 (리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문) - UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩 - "props"라고 하는 ..

리액트 공식 문서, 자습서에서는 컴포넌트를 알아보기 앞서 엘리먼트 렌더링이라는 내용을 기술하고 있어, 이부분도 가볍게 살펴 보고 가려고 한다. 이번장은 거의 공식문서의 내용이 다이니, 해당 문서를 참고하는것도 좋을 것 같다. https://ko.reactjs.org/docs/rendering-elements.html 1. 엘리먼트란? - 리액트에서 가장 작은 단위 - 화면에 표시할 내용을 기술 ex) 엘리먼트 예시 const element = hello, GodDaeHee!~; - 위의 예시에서 보듯, 우리가 예전에 사용하던 브라우저의 DOM 엘리먼트와는 다르게 일반 객체로 볼 수 있음 - 쉽게 생각하면, 엘리먼트는 컴포넌트의 구성 요소이고, 반대로 컴포넌트를 엘리먼트로 구성되어 있다고 생각 할 수 있는..