일반 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

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

1. 함수형 컴포넌트 vs 클래스형 컴포넌트 컴포넌트를 선언하는 방식은 함수형 컴포넌트와 클래스형 컴포넌트로 나뉩니다. 클래스형 컴포넌트 import React, {Component} from 'react'; class App extends Component{ render() { const name = "react"; return {name} } } export default App; 클래스형 컴포넌트의 특징은 ① state 기능 ② 라이프사이클 기능 ③ 임의 메서드 정의 클래스형 컴포넌트에는 render함수가 반드시 있어야 하고, JSX를 반환해주어야 합니다. 함수형 컴포넌트 import React from 'react'; import './App.css'; function App() { const n..

21-22/21-22 리액트 마스터 2021. 10. 11. 14:00

1. 리액트의 이벤트 시스템 이벤트 : 사용자가 웹브라우저에서 DOM 요소들과 상호작용하는 것 리액트의 이벤트 작성법은 일반 HTML에서의 이벤트 작성법과 비슷합니다. ※주의 사항 ① 이벤트 이름은 카멜 표기법으로 작성 ② 이벤트 설정 시 함수 형태의 객체 전달 - 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니다. ③ DOM 요소에만 이벤트 설정 가능 - 직접 만든 컴포넌트에는 이벤트 자체 설정 불가 그냥 이름이 onClick인 props를 컴포넌트에게 전달할 뿐 ⇨ 전달받은 props를 컴포넌트 내부의 DOM이벤트로 설정은 가능하다. ▶이벤트 종류 더보기 더보기 Clipboard, Composition, Keyboard, Focus, Form, Mouse, Selection, Touch, UI..

21-22/21-22 리액트 마스터 2021. 10. 11. 14:00

1. 코드 이해하기 import React from 'react'; 리액트를 불러와서 사용할 수 있게 해주는 코드 리액트 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성되는데, 프로젝트 생성 과정에서 node_modules 디렉터리에 react모듈이 설치된다. 이로 인해 import 구문을 통해 리액트를 불러와 사용할 수 있게 된다. ▶ 번들러의 사용 위처럼 모듈을 불러와 사용하는 것은 브라우저엔 없는 기능이며, Node.js에서 지원하는 기능이다. 이런 기능을 브라우저에서 사용하기 위해 번들러(bundler)를 사용한다. 번들(bundel)은 묶는다는 뜻이며 파일을 묶듯이 연결한다. 리액트는 웹팩 번들러를 사용한다. 번들러 도구를 사용하면 import(또는 require)로 모듈을 ..

21-22/21-22 리액트 마스터 2021. 10. 4. 14:01

1. 왜 리액트인가? 자바스크립트만으로도 규모가 큰 애플리케이션을 만들 수 있는 시대가 왔다. 하지만 순수 자바스크립트만으로 프런트엔드 사이드에서 돌아가는 애플리케이션 구조를 관리하기는 힘들다. 이를 해결하기 위해 Angular, Vue.js등 수많은 프레임워크가 조금씩 다른 관점에서 관리를 위한 노력을 해왔다. Angular와 Vue.js같은 프레임워크는 주로 MVC, MVW 아키텍처로 애플리케이션을 구조화한다. 이 구조들이 가진 공통점은 모델(Model)과 뷰(View)가 있다는 것이다. 모델, 뷰, 컨트롤러 ▪ 모델 : 애플리케이션에서 사용하는 데이터를 관리하는 영역 ▪ 뷰 : 사용자에게 보이는 부분 ▪ 컨트롤러 : 프로그램이 사용자에게서 어떤 작업(ex: 버튼 클릭, 텍스트 입력)을 받으면 모델 ..

21-22/21-22 리액트 마스터 2021. 10. 4. 14:00