메모장
-
[REACT_MEMO] 파워노트10IT/REACT 2024. 6. 19. 18:15
# Handing Events ? Event = 특정 사건 이벤트를 처리하는 것 = 이벤트를 핸들링 한다 어떤 이벤트가 발생했을때 해당 이벤트를 처리하는 함수 = Event Handler(이벤트 핸들러) 계속 듣고있다는 의미로 Event Listener라고도 부른다. 함수의 대한 bind는 자바스크립트에서도 나오는 동일한 이슈로 반드시 넣어줘야한다. https://ko.javascript.info/bind 함수 바인딩 ko.javascript.info https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind Function.prototype.bind() - JavaScript | MDNThe ..
-
[REACT_MEMO] 파워노트9IT/REACT 2024. 6. 13. 17:58
# Hook의 규칙 Hook은 단순한 Javascript 함수이지만 두 가지 지켜야 할 규칙이 있다. 1. Hook은 무조건 최상위 레벨에서만 호출해야한다. 최상위 레벨 = React함수 컴포넌트의 최상위 레벨 따라서 반복문이나 조건문 또는 중첩된 함수들 안에서 Hook을 호출하면 안 된다는 뜻 Hook은 컴포넌트가 렌더링 될 때마다 매번 같은 순서로 호출되어야 한다. React가 다수의 useState hook과 useEffect hook에 호출해서 컴포넌트의 state를 올바르게 관리 할 수 있다. 2. React함수 컴포넌트에서만 Hook을 호출해야 한다. 일반적인 JavaScript 함수에서 Hook을 호출하면 안된다. Hook은 React함수 컴포넌트에서 호출하거나 직접 만든 커스텀 Hook에..
-
[REACT_MEMO] 파워노트8IT/REACT 2024. 6. 11. 17:19
# Hooks의 개념, useState, useEffect Component에는 State라는 개념이 등장 state를 이용해서 렌더링에 필요한 데이터를 관리 + Function Component ㄴ state 사용 불가 ㄴ Lifecycle에 따른 기능 구현 불가 >> 클래서 컴포넌트와는 달리 코드도 굉장히 간결하고 별도로 state를 정의해서 사용하거나, 컴포넌트 생명주기에 맞춰 어떤 코드가 실행되도록 할 수 없었다. 따라서 함수 컴포넌트에 이런 기능을 지원 하기 위해 나온것이 바로 Hook이다. Hook을 사용하면 함수 컴포넌트도 클래스 컴포넌트의 기능을 모두 동일하게 사용 할 수 있다. + Class Component ㄴ생성자(컨스트럭터)에서 sta..
-
[REACT_MEMO] 파워노트7IT/REACT 2024. 6. 4. 00:44
# State- 리액트에서의 State는 리액트 Component의 상태를 의미- 리액트 Component의 변경 가능한 데이터를 State라고 한다.- State는 개발자가 정의한다.- 중요한 점은 State는 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다. State가 변경될 경우 Component가 재 렌더링 되기 때문에, 렌더링과 데이터 흐름의 관련 없는 값을 포함하면 불필요한 경우에 컴포넌트가 다 시 렌더링 되어 성능을 저하시킬 수 있기 때문. 그래서 렌더링과 데이터 흐름에 관련이 있는 값만 state에 포함해야 하며, 그렇지 못한 값은 component의 인스턴스로 정의하면 된다.- 리액트의 state는 JavaScript객체이다. # 정의된 State는 직접..
-
[REACT_MEMO] 파워노트6IT/REACT 2024. 5. 23. 00:56
# Components and Props의 정의(아주중요) + Components?- 리액트는 컴포넌트기반- 리액트는 모든 페이지가 Component-Based이다.- 작은 컴포넌트들이 모여서 큰 컴포넌트를 구성하고 이것이 페이지를 구성한다.- 자바스크립트의 함수와 의미가 비슷Ex) 리액트 컴포넌트를 하나의 함수로 생각하면 쉽다.입력 --- Javascript function ---> 출력입력 --- React component ---> 출력..Props --- React component ---> React element리액트 컴포넌트에서의 입력은 'Props(속성)'가 되고 출력은 'Element'가 된다.즉 리액트 컴포넌트가 해주는 역할은, 어떠한 속성을 입력으로 받아서 그에 맞는 엘리먼트..
-
[REACT_MEMO] 파워노트5IT/REACT 2024. 5. 21. 23:58
# 리액트 Elements의 특징- 불변성(변하지 않는 성질)- im + mutable = immutable(변경할 수 없는, 불변)- 한번 생성된 elements는 변하지 않는다.- Elements 생성후에는 children이나 attributes를 바꿀 수 없다. 즉 Elements는 다양한 모습으로 만들 수 있지만, 그 후로는 변경할 수 없다. 마치 붕어빵의 속을 바꿀 수 없는 것처럼.. 컴포넌트 = 붕어빵 틀 / Element = 붕어빵 # 엘리먼트 랜더링 하기- 리액트로 만든 웹사이들은 단 하나의 Root DOM을 가지게 된다.- 기존에 있던 리액트에 추가적으로 연동하게 되면 여러 개의 분리된 수많은 Root DOM을 가질 수 있다. // Root DOM에 React element ..
-
[REACT_MEMO] 파워노트4IT/REACT 2024. 5. 21. 00:16
# Rendering Elements리액트의 엘리먼트 = 리액트를 구성하는 요소 엘리먼트는 요소, 성분을 의미즉 어떤 물체를 구성하는 성분 Elements are the smallest building blocks of React apps.= 리액트 앱을 구성하는 가장 작은 블록들을 엘리먼트라 한다. 기존에 엘리먼트라고 하면돔 엘리먼트를 지칭했다. # 리액트 엘리먼트와 돔엘리먼트의 차이리액트가 개발되던 아주 초창기에 화면에 나타나는 내용을 기술하는 자바스크립트 객체를 일컫는 용어가 필요했다.처음에는 Descriptor로 불렸지만, 최종적으로 나타나는 형태는 돔엘리먼트 였기 때문에 돔과의 통일성을 위해서 엘리먼트로 부르는 것으로 변경되었다. 즉 리액트 엘리먼트는 돔 엘리먼트의 가상표현이라 볼 수 있다.그리..
-
[REACT_MEMO] 파워노트3IT/REACT 2024. 5. 18. 01:45
# JSX리액트를 사용하고 개발할 때 필수로 사용하는 것 # JSX의 개념리액트의 공식명칭은 리액트 JSJSX는 A syntax extension to Java Script(JavaScript의 확장 문법)JSX는 JS와 연관 있음JSX는 Java Script + XML/HTML 합친 것 // JSX 코드 const element = h1>Hello, worldh1>; # JSX의 역할내부적으로 XML/ HTML 코드를 JavaScript로 변환하는 과정을 거친다.최종적으로는 자바스크립트 코드로 나오는 것. // JSX를 사용한 코드 class Hello extends React.Component{ render(){ return div>Hello {this.props.toWhat}..