[SeSAC] React 학습 정리(3) / 이벤트-함수형 컴포넌트 1. 함수형 컴포넌트에서 상태관리(이벤트 핸들링에 앞서) 2. 함수형 컴포넌트에서 이벤트 핸들링 3. 함수형 컴포넌트에서 이벤트 핸들러에게 인자를 전달하기(쉬움) 1. 함수형 컴포넌트에서 상태관리(이벤트 핸들링에 앞서) 함수형 컴포넌트는 함수 자체이다. (클래스형 컴포넌트와는 태생이 다름) 예를 들어 함수 자체인 함수형 컴포넌트 내부의 함수1, 함수2, 함수3 이 있다면, 컴포넌트 내부의 함수1~3 의 정보를 찾고 사용하기 위한(상태를 관리하기위한) 방법은 무엇인가?? 클래스나 객체의 경우에는 클래스/객체 내부의 메서드(함수)1, 메서드(함수)2, 메서드(함수)3 -> 메서드(함수)1을 찾고 사용하기위해(상태를 관리하기 위해) this를 사용한다. >> 메서드(함수)1의 this가 클래스/객체 자체를 가.. 2023. 9. 29. [SeSAC] React 학습 정리(3) / 이벤트-클래스형 컴포넌트 1. 함수를 선언해서 바로 onClick으로 전달 (일반, 화살표) 2. 메서드로 바꿔서 onClick에 전달 3. Bind를 써서 일반함수를 원하는대로 사용 4. 일반and화살표 이벤트 핸들러에게 인자를 전달하는 두가지 방법 React 클래스형 컴포넌트 이벤트 핸들링 (이벤트 핸들러의 this, bind, 화살표함수, 인자 전달) 1. 함수를 선언해서 바로 onClick으로 전달 (일반, 화살표) * JavaScript에서 함수가 일반 함수로 호출될 때, 함수 내부에서의 this는 호출한 곳에 따라 달라짐. * JavaScript에서 함수가 화살표 함수로 호출될 때, 함수 내부에서의 this는 정의된 곳의 바로 외부 범위임. import { Component } from 'react'; class Wh.. 2023. 9. 28. [SeSAC] React 학습 정리(3) / 이벤트-합성이벤트 1. Event 기입 - 이벤트는 소문자가 아닌 카멜 케이스(camelCase)를 사용 (ex. onclick ➡ onClick) - JSX를사용해 이벤트 핸들러 전달시 () 사용 X 2. Synthetic Event ( 합성 이벤트 [객체] ) 일부 브라우저 간에 엔진 및 버전의 차이로인해 이벤트 객체의 구조와 속성이 다를 수 있다. 리액트는 이러한 브라우저간의 차이점을 통합해서 사용하고자 이벤트 객체를 감싼 합성 이벤트 객체 개념을 사용한다. (브라우저 마다 코드를 다르게 써야하면 곤란하니까) 이때 브라우저의 이벤트 객체를 '네이티브 이벤트 객체' 라 하며 이것을 감싼 객체를 '합성 이벤트 객체' 라 한다. 즉, 합성 이벤트 객체는 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 Wrapper(래퍼.. 2023. 9. 28. [SeSAC] React 학습 정리(2) / state state : - 특정 컴포넌트가 가지고 있는 상태값 - state 변경시 재 랜더링이 자동으로 수행됨 클래스형 / 함수형 컴포넌트 에서 state 사용 문법이 다름. 클래스형 컴포넌트에서 state - state의 이름과 초기값을 생성자 혹은 필드에서 설정해 주고, - render() 함수에서 this.setState 함수를 통해 state를 변경해 줄 수 있음. // 클래스형 컴포넌트 import React, { Component } from 'react'; class Counter extends Component { // 생성자를 사용한 state 설정 방법 // React 버전 16.3.0 이전에 사용되던 방법 constructor(props) { super(props); this.state = .. 2023. 9. 27. [SeSAC] React - 실행 환경 React를 어느 환경에서 사용해야 할까요? React를 사용할 때, 어느 환경을 선택해야 하는지에 대한 고민 : 실습때 npm으로 React를 설치했는데 왜 프론트엔드에서 라이브러리를 추가해서 쓰질 않고 이렇게 하는지 궁금증이 생겼습니다. 1. React 설치 가능한 환경 - React 라이브러리는 브라우저 환경과 Node.js 환경에서 모두 사용 가능합니다. - 두 환경에서 React 라이브러리와 JSX 문법을 사용할 수 있습니다. 결론: React 코드 자체는 Node.js와 브라우저에서 동일하게 작동하지만, 어느 환경에서 사용할지에 따라 차이점이 있습니다. 2. 차이점 - 모듈 시스템: Node.js는 CommonJS 모듈 시스템을 사용하며, 브라우저에서는 ES6 모듈을 사용하는 것이 일반적입니다.. 2023. 9. 27. [SeSAC] React - 데이터 바인딩 1. 데이터 바인딩 화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것 저는 위의 데이터 바인딩 정의보다 아래 정의를 통해 더 이해가 되었습니다. 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터(여러 개의 JS 객체)를 일치시키는 것 제가 아는 회원가입의 경우를 예로들어 보면 (다른방식도 많을거라고 생각합니다.) 이 경우는 화면 데이터 --> 메모리 데이터 순서로 동기화를 한 경우입니다. 1. 유저는 ID,PW 와 같은 화면에 보여지는 사용자가 데이터를 입력하고 회원가입 버튼을 누릅니다. 2. 이때 이벤트를 발생시켜서 HTML요소 안에서 사용자가 입력한 데이터를 찾아서 변수에 할당(메모리에 저장)합니다. 3. 변.. 2023. 9. 26. 이전 1 2 3 4 5 6 7 ··· 12 다음
