4.1 리액트의 이벤트 시스템 이벤트란 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 말합니다. 4.1.1 이벤트를 사용할 때 주의 사항 이벤트 이름은 카멜 표기법으로 작성합니다. 예를 들어 HTML의 onclick은 리액트에서 onClick으로 작성해야 합니다. 또, onkeyup은 리액트에서 onKeyUp으로 작성합니다. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달합니다. HTML에서 이벤트를 설정할 때는 큰따옴표 안에 실행할 코드를 넣었지만, 리액트에서는 함수 형태의 객체를 전달합니다. DOM 요소에만 이벤트를 설정할 수 있습니다. 즉 div, button, input, form, span 등의 DOM 요소에는 이벤트를 설정할 수 있지만, 우리가 ..

21-22/21-22 리액트 스타터 -1 2021. 11. 15. 13:00

일반 CSS : 컴포넌트 스타일링하는 가장 기본적인 방식 Sass : 자주 사용되는 CSS 전처리기 중 하나로 확장된 CSS 문법을 사용하여 CSS 코드를 작성 CSS Module : 스타일 작성 시, CSS 클래스가 다른 클래스의 이름과 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해주는 옵션 styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식. 9.1 가장 흔한 방식, 일반 CSS CSS 작성 시, 가장 중요한 점 : CSS 클래스를 중복되지 않게 만드는 것 9.1.1 이름 짓는 규칙 컴포넌트 이름-클래스 형태 (예: App-header) BEM 네이밍 : 해당 클래스가 어디에서 어떤 용도로 사용되는지 명확하게 작성하는 방식 (예: .card_title-primar..

21-22/21-22 리액트 마스터 2021. 11. 15. 13:00

INDEX 3장 컴포넌트 1. 클래스형 컴포넌트 ● 컴포넌트를 선언하는 두 가지 방식 2. 첫 컴포넌트 생성 2.1 src 디렉터리에 MyComponent.js 파일 생성 2.2 코드 작성하기 2.3 모듈 내보내기 및 불러오기 3. props 3.1 JSX 내부에서 props 렌더링 3.2 컴포넌트 사용 시 props 값 지정하기 3.3 props 기본값 설정: defaultProps 3.4 태그 사이의 내용을 보여주는 children 3.5 비구조화 할당 문법을 통해 props 내부 값 추출하기 3.6 propTypes를 통한 props 검증 * isRequired를 사용하여 필수 propTypes 설정 4. state 4.1 클래스형 컴포넌트의 state 4.2 함수 컴포넌트에서 useState 사용..

21-22/21-22 리액트 스타터 -2 2021. 11. 8. 18:49

3.1 클래스형 컴포넌트 컴포넌트를 선언하는 방식은 두 가지입니다 하나는 함수형 컴포넌트이고 다른 하나는 클래스형 컴포넌트입니다. import React, { Component } from 'react'; class App extends Component { render() { const name = 'react'; return {name}; } } export default App; 클래스형 컴포넌트는 다음과 같이 이루어져 있습니다. 클래스형 컴포넌트이지만 역할을 이전에 보았던 함수형 컴포넌트와 같습니다. 하지만 클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있다는 것과 메서드를 정의할 수 있다는 점에서 함수형 컴포넌트와 차이점이 있습니다. 클래스형 컴포넌트에서는 rende..

21-22/21-22 리액트 스타터 -1 2021. 11. 8. 18:46

1. npm 알아보기 npm : Node Package Manager 노드가 자바스크립트 프로그램을 컴퓨터에서도 실행할 수 있도록 해 주고, 그 외에 여러 가지 기능들을 제공하는 125만 개의 패키지가 존재한다. npm에 업로드된 노드 모듈을 패키지라고 부른다. 2. package.json으로 패키지 관리하기 package.json : 설치한 패키지의 버전을 관리하는 파일 노드 프로젝트 폴더 내부에 package.json을 만들어야 함 D:\CODING\node.js\5장에 npm을 설치하고 package.json 파일을 만드는 과정 생성된 package.json { "name": "npmtest", "version": "0.0.1", "description": "test npm and package.j..

21-22/21-22 Node.js 2021. 11. 8. 18:46

1. 요청과 응답 이해하기 클라이언트가 서버로 요청(request)을 보냄 서버에서는 요청의 내용을 읽고 처리한 뒤 클라이언트에 응답(response)을 보냄 클라이언트로부터 들어온 요청을 받을 이벤트 리스너를 등록해야 함 const http = require('http'); http.createServer((req, res) => { // 응답 처리 } http 모듈에 있는 createServer 메서드를 사용 인수로 요청에 대한 콜백 함수를 넣을 수 있으며 요청이 들어올 때마다 콜백 함수가 실행됨 콜백 함수에 대한 응답을 적으면 됨 req 객체는 요청에 관한 정보 / res 객체에는 응답에 관한 정보 서버 연결(한번에 여러 개 연결하기) const http = require('http'); http...

21-22/21-22 Node.js 2021. 11. 8. 18:46

1. 라이프사이클 메서드의 이해 1) 라이프 사이클 메서드의 종류(9가지)> Will 접두사가 붙은 메서드 : 어떤 작업을 작동하기 전에 실행되는 메서드 Did 접두사가 붙은 메서드 : 어떤 작업을 작동한 후에 실행되는 메서드 2) 라이프 사이클의 종류 마운트 : 페이지에 컴포넌트가 나타남 업데이트 : 컴포넌트 정보를 업데이트 언마운트 : 페이지에서 컴포넌트가 사라짐 (1) 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트(mount)라고 한다. (2) 업데이트 컴포넌트가 업데이트하는 경우들 props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링될 때 this.forceUpdate로 강제로 렌더링을 트리거할 때 (3) 언마운트 컴포넌트를 DOM에서 제거하는 것을 언마운트(unmo..

21-22/21-22 리액트 마스터 2021. 11. 8. 15:00

import React, {useState, useReducer} from 'react'; function reducer(state, action){ return { ...state, [action.name]: action.value }; } const Info = () => { const [state, dispatch] = useReducer(reducer, { name: '', nickname: ''}); const {name, nickname} = state; const onChange = e => { dispatch(e.target); }; return ( 이름: {name} 닉네임: {nickname} ); }; export default Info; Hooks는 함수형 컴포넌트에서도 상태 관리를..

21-22/21-22 리액트 마스터 2021. 11. 8. 15:00

HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있는데 이것이 ref(reference의 줄임말) 개념이다. 🐳 리액트 컴포넌트 안에서는 id를 사용하면 안 될까? 컴포넌트를 여러 번 사용한다고 가정할 때, HTML에서 DOM의 id는 유일(unique) 해야 하는데, 이런 상황에서는 중복 id를 가진 DOM이 여러 개 생기기 때문에 잘못된 사용이 된다. ref는 전역적으로 작동하지 않고, 컴포넌트 내부에서만 작동하기 때문에 이런 문제가 생기지 않는다. 1. ref는 어떤 상황에서 사용해야 할까? -> 'DOM'을 꼭 직접적으로 건드려야 할 때 1) 예제 컴포넌트 생성 클래스형 컴포넌트에서 ref를 사용하는 방법을 알아보자! > Validat..

21-22/21-22 리액트 마스터 2021. 11. 1. 19:10

1. 자바스크립트 배열의 map() 함수 🐳 자바스크립트 배열 객체의 내장 함수인 map함수를 사용하여 반복되는 컴포넌트를 렌더링 할 수 있다. map함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성해준다. 1) 문법 arr.map(callback, [thisArg]) callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세 가지이다. currentValue : 현재 처리하고 있는 요소 index : 현재 처리하고 있는 요소의 index 값 array : 현재 처리하고 있는 원본 배열 thisArg(선택항목) : callback 함수 내부에서 사용할 this 레퍼런스 ❗ map 함수 사용해보기 const numbe..

21-22/21-22 리액트 마스터 2021. 11. 1. 19:10

INDEX 2장 JSX ● 2.1 코드 이해하기 ● 2.2 JSX란? ● 2.3 JSX의 장점 ● 2.4 JSX 문법 ● 2.5 ESLint와 Prettier적용하기 ● 정리 ● 2.1 코드 이해하기 import React from 'react'; 프로젝트 생성 과정에서 node_modules 디렉터리에 react 모듈이 설치된다. import구분을 통해 리액트를 불러와서 사용 가능하다. *Node.js에서는 import대신 require을 사용한다. 번들러: 파일을 묶는다. 번들러를 사용하면 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해 준다. -리액트에서는 주로 웹팩을 사용한다. (편의성, 확장성) 로더:파일을 불러온다. *css-loader, file-loader..

21-22/21-22 리액트 스타터 -2 2021. 11. 1. 13:01

INDEX 1장 리액트 시작 1. 왜 리액트인가? ● 리액트의 이해 2. 리액트의 특징 ● DOM이란? ● Virtual DOM ● 기타 특징 3. 작업 환경 설정 ● Node.js와 npm, yarn ● 에디터 설치 ● Git 설치 ● create-react-app으로 프로젝트 만들기 4. Question 개념 정리 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 1. 왜 리액트인가? ● 리액트의 이해 자바스크립트는 단순한 스크립트 언어에 불과하지만 웹 애플리케이션에서 가장 핵심적인 역할 슬랙, VS CODE 등의 데스크톱 애플리케이션 ➨ 일렉트론으로 개발 자바스크립트의 여러 프레임워크를 사용하여 페이스북, 디스코드 등 수많은 애플리케이션 개발 # 일렉트론: 자바스크립트로 데스크톱 앱을 개발하는 도구 ..

21-22/21-22 리액트 스타터 -2 2021. 11. 1. 13:00