react 4

[새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 12주차 (2): React Hooks, Router

Hooks- 함수형 컴포넌트에서 상태 관리와 생명주기 기능을 사용할 수 있게 해주는 함수.- Hook은 React의 함수형 컴포넌트 내에서만 사용 가능.- custom Hook 이름은 "use"로 시작하는 것을 권장.💻 주요 Hook 종류1. useState: 컴포넌트에서 상태를 관리할 수  있게 해준다.2. useEffect: 컴포넌트의 랜더링 이후에 특정 작업을 실행할 수 있게 해준다. useEffect(() => { console.log("location이 변경될 때 마다 실행됩니다. ✊🏻"); }, [location]);3. useMemo: 계산 비용이 높은 연산의 결과를 메모이제이션하여 성능을 최적화 한다. // [useMemo 사용!] // 특정 값이 변경되었을 때만 함수가 호출..

[새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 12주차 (1): React style

Style 적용💻 일반 CSS- inline style 적용하기export default function BasicCSS() { // object 따로 선언 const childDiv = { backgroundColor: "pink", width: "100px", height: "100px", textAlign: "center", lineHeight: "100px", }; return ( 스타일 적용 방법 인라인 스타일 CSS 파일 만들어서 import .module.css 파일 만들어서 import styled-components 라이브러리 사용(설치 필요) SAAS 사용 (설치..

[새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 11주차 (2): React Props & State, Event Handling, map(), filter(), Life Cycle

Props & State💻 Props (Properties)- 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법 (상위➡️하위 만 가능!)- 여러 번 쓰이는 컴포넌트에서 내부 데이터만 다르게 사용하고 싶을 때 사용- 컴포넌트끼리 값을 전달하는 수단// Class형 propsimport { Component } from "react";// props는 반드시 객체이다.class ClassProps extends Component { render() { const divStyle = { color: this.props.color, }; return ( hi, {this.props.name} 별명: {this.props...

[새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 11주차 (1): React

ReactFacebook에서 개발한 사용자 인터페이스(UI) 구축을 위한 Javascript 라이브러리이다.🖥️ 특징1️⃣ Data Flow- 단방향 데이터 흐름을 채택하고 있다. 데이터는 부모 컴포넌트에서 자식 컴포넌트로 단방향 전달된다.2️⃣ Component 기반 구조- 어플리케이션의 UI를 독립적이고 재사용 가능한 조각으로 나누어 구성한다. - 코드의 재사용성과 유지보수성이 향상된다.3️⃣ Virtual DOM1) 상태 변경: 컴포넌트의 상태가 변경되면 React는 새로운 Virtual DOM 트리를 생성한다.2) 비교: 새로 생성된 Virtual DOM과 이전 Virtual DOM을 비교하여 변경된 부분을 파악한다.3) 재조정: 변경된 부분만을 실제 DOM에 적용한다.4️⃣ Props and ..