react

https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 1. Redux 1) 개념 : 크로스 컴포넌트, 앱 와이드 상태를 위한 상태 관리 시스템 - 우리의 상태를 변경하고 화면에 표기하는 데이터를 관리하도록 도와주는 역할 2) State의 종류 ⓐ 로컬 state : 데이터가 변경되어서 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태 👉 useState를 이용하거나 더 복잡하다면 useReducer을 사용하여 관리할수 있음 ⓑ Cross-componen..

1. 클래스 컴포넌트 - 과거에 많이 사용한 컴포넌트 선언 방식 * React 16.8이전에는 사이드 이펙트(훅)를 다루기 위해서는 클래스 기반 컴포넌트를 사용했어야 했다. // 클래스 class User extends Component { render(){ return {this.props.name}; } } // 함수형 const User = (props) => { return {props.name}; }; - props는 this예약어를 사용해야하고, Component를 상속받아야 한다. - render() 를 사용한다. class Users extends Component { constructor(){ super(); this.state = { // 상태 조각과는 상관없이 state는 객체가 된다..

https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 1. Side Effect란? - 애플리케이션에서 일어나는 모든 것 - 리액트에서는 state값이 변하는 등의 작업이 일어날 때 리렌더링 됨 - 만약 사이드 이펙트가 계속 리액트에 관여하게 된다면 무한 루프에 빠질 가능성이 크다. - 이것을 해결하기 위한 방법으로 useEffect 가 있다. 1) useEffect : 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 hook useEff..

https://www.udemy.com/course/best-react/ 1. jsx 제한 사항 및 해결 방법 - 루트 요소는 1개여야만 한다 - 그 이유는 자바스크립트 자체가 원래 하나의 요소만 반환하기 때문 // 자바스크립트에서 아래 문법은 불가능 하다 return ( React.createElement('h2',{}, 'hi'); React.createElement('h2',{}, 'hi'); ); 1) 해결 방법 ⓐ 여러개의 요소를 하나의 태그(아무태그)로 감싼다. => div soup 발생, 불필요한 렌더링 과정 실행 * div soup : div태그가 중첩되어 스타일링이 깨질 수도 있고, 속도가 느려질 수도 있다. ⓑ 배열형태로 반환한다. => 경고 발생 키가 필요하기 때문 그래서 이상적인 해..

https://www.udemy.com/course/best-react/ * css 파일로 빼서 jsx파일에 import하는 방식 : 파일 내 모든 컴포넌트 요소에 영향을 미침 1. 동적 스타일 1) 인라인 스타일 hi - 라벨의 색상을 state 값에 따라서 동적으로 적용 가능 - 인라인 style은 최우선순위기 때문에 css파일을 오버라이드 함 2) css 클래스 .className1.className2 { color: black; } - 템플릿 리터럴을 이용하여 동적으로 클래스 이름 추가 가능 - css 파일에서 클래스 이름에 따른 css를 설정해주면됨 2. styled components - 컴포넌트 별 스타일을 지정할 수 있는 패키지 npm install --save styled-componen..

【글로벌 Best】 React 완벽 가이드 with Redux, Next.js, TypeScript | Udemy 1. 배열 동적으로 렌더링 - 상위 컴포넌트에서 동적으로 변화하는 배열을 props로 받았을 때, 하위 컴포넌트에서 동적으로 렌더링 할 수 있다. - map함수를 이용하여, jsx를 리턴하도록 하면 된다. - key를 지정하지 않으면, 웹페이지에서 경고가 난다. (오류는 안남) * 경고가 나오는 이유는 새로운 아이템이 추가될 때, 어느 인덱스에 추가가 될지 리액트가 모름 그래서 리액트가 추가될 배열의 모든 상태를 확인하는 작업이 생겨서 비효율적임 const Expense = (props) => { return( {props.items.map((expense) => ( //props.items..

【글로벌 Best】 React 완벽 가이드 with Redux, Next.js, TypeScript | Udemy 1. 이벤트 핸들러 작성(클릭 시 이벤트) const clickHandler = () => { console.log("Clicked!"); // 클릭 시 실행되는 함수 작성 }; return( Change! // clickHandler() xxx ); ⭐ 함수를 호출할 때 이름만 작성해야한다. 함수 뒤에 괄호를 붙이면 jsx 코드가 리턴될 때 함수가 실행된다. 2. State ! ⭐⭐⭐⭐⭐ - state를 사용하기 위해선 react의 useState를 가져와야 한다. import React, {useState} from "react"; 1) state 사용 방법 - 컴포넌트 함수 내에서만 사..

【글로벌 Best】 React 완벽 가이드 with Redux, Next.js, TypeScript | Udemy 1. 리액트를 사용하는 이유? - 리액트는 모든 요소들이 컴포넌트로 이루어져 있음 * 컴포넌트 : 재사용이 가능하고, 우려사항을 분리할 수 있음(=반복이 없고, 코드를 작고 관리할 수 있는 규모로 유지) 👉 생산성과 유지보수가 용이하다 👉 복잡하고 동적인 웹 어플리케이션에서 ui를 동적으로 나타내기 위해서는 많은 상태를 관리해야하는 부담이 생기는데 react가 이것을 해결해 준다. 👉 virtual DOM을 이용한 빠른 렌더링이 가능하다. * react/vue/angular중 선택해야하는 경우 [React] 내가 React를 선택한 이유 (tistory.com) [React] 내가 React..