REACT

ex01: Property: Component 작성 (Date Flow: Top -> Down) Kanban Board #1 ex02:Component Styling Kanban Board #1 형제 컴포넌트끼리 통신은 불가, 이를 해결하기 위해 데이터를 부모에게 넘

소스코드webpack.config.jscss-modules 적용 여부에 따라 옵션 적용 객체의 형태로 넘겨주어야 한다. 크기의 경우 'px'를 안붙여도된다.모듈별로 hashing하게 하지 않고, global로 사용할 수 있게 설정css를 모듈로하여 사용하기같은 클래스명

자세한 코드 보기 함수는 함수를 호출하는 주체가 this가 되며, 클래스는 객체를 가리킨다.함수에서의 this는 콜하는 주체에 따라 달라지므로 사용에 주의해야하며 this는 클래스 컴포넌트에서 더욱 많이 사용된다.state가 변경되면 reder가 실행이 된다. ren

자세한 코드 보기 State 란컴포넌트 내부의 상태 관리 데이터데이터의 형식은 상관 없다.상태의 변경은 UI를 다시 랜더링 하게 한다.클래스 컴포넌트에서는 contructor에서 default 값 세팅으로 생성한다.함수 컴포넌트에서는 useState라는 후크 함수를

설치 icons(light 유료, regular, solid 기본, brands(기업))선택 설치regular(far)solid(fas) -> defaultlight(fal)

설치 > App.js > test

자세한 코드 보기 LifeCycle diagram 보기 Mount LifeCycleconstructorgetDerivedStateFromProps(nextProps, prevState): props로 받아온 값을 state에 동기화 한다.react ver16.3rend

절대 컴포넌트의 상태를 직접적으로 변화 시켜서는 안된다.컴포넌트의 상태는 불변적으로 다루어야한다.항상 setState, useState Hook 함수 호출에서 반환하는 setter를 사용한다.직접적으로 this.state를 변경하면 React의 상태 관리를 우회하게 된

dangerouslySetInnerHTML : 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법입니다.일반적으로 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출될 수 있기 때문에 위험합니다. 따라서 React에서 직접

React에서 사용이 되는 Key에 대해 설명합니다.예제 코드 실행해보기 : https://codepen.io/jaesung2386/pen/rNmMrOx위 코드를 실행하면, 콘솔창에서 아래 사진과 같은 경고문을 볼 수 있습니다.CodePen에서는 에러 및 오류

React에서 이벤트 핸들러를 바인딩 하는 방법에 대해 설명합니다.JS 문법과 아래 사항에 대해 공부를 하셔야 합니다.ComponentArrow Function(화살표 함수)state※ Hook을 사용하지 않더라도 arrow function는 효율적인 기능을 제공하며