//log my lifestyle

React 완벽가이드 섹션6 - 리액트 컴포넌트 스타일링 css사용방식 - css파일을 생성하고 js파일에 import하는 방식 이 방식에서 css파일은 스코프를 가지지않아 다른 컴포넌트에 영향을 줄 수있다. - styled component 이나 css모듈 사용하는 방식 모듈이나 스타일컴포넌트를 사용하면 위의 문제점을 피할수있음 1. 동적으로 CSS설정 1) inline style Course Goal inline style은 최우선순위기때문에 css파일을 오버라이딩함 동적으로 적용하기위해 중괄호를 써주고, 라벨의 색상을 state 값에 따라서 동적으로 적용 2) CSS class css파일에 class스타일을 만들고, 백틱(템플릿리터럴)과 삼항연산자를 이용하여 동적으로 css클래스를 설정할수있음 .c..

React 완벽가이드 섹션5 - 렌더링 리스트 및 조건부 Content 1. 데이터 동적으로 렌더링하기 (.map) 사용자가 데이터를 얼마나 추가할지 모르기때문에, 목록을 하드코딩하는 것은 지양해야한다. (예제에서는 expenseItem 의 수를 일일히 설정한 부분) 먼저 상위컴포넌트(App.js)에 있는 배열을 하위컴포넌트(Expenses.js)에서 렌더링하기위해 props를 통해 를 전달한다. const Expenses = (props) => { const [filteredYear, setFilteredYear] =useState('2020'); const filterChangeHandler = (selectedYear) => { setFilteredYear(selectedYear); }; retur..

React 완벽가이드 섹션4 - 리액트 State 및 이벤트 다루기 1. 이벤트 핸들러 써보기 const ExpenseItem =(props) => { function clickHandler(){ } // 함수로 쓰거나 const clickHandler = () => { // 화살표함수로 쓰거나 상관없음 console.log('clicked!') } return ( Change Title ); } 이벤트리스너를 추가할때 on으로 시작하는 props를 괄호안에 함수이름만 적어주면 된다. 함수이름뒤에 괄호를 추가하면 jsx코드가 리턴될때 코드가 실행된다. 그래서 함수만 지정하고 onClick을 위한 값으로 이 포인터를 전달하고 클릭할때 함수를 실행! 2. State 컴포넌트 함수는 처음 렌더링 된 이후로 다..

React 완벽가이드 섹션3 - 리액트 기초 및 실습 컴포넌트 1.리액트 - 컴포넌트란? 리액트는 사용자 인터페이스를 구축하는 자바스크립트 라이브러리 애플리케이션의 각 상태에 대한 간단한 뷰만 설계, React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링 리액트의 중요한개념은 컴포넌트 이고, 여기서 모든 UI는 컴포넌트로 구성되어 있다. - 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줌. - 재사용이 가능,코드를 우려사항을 분리 2.선언적 방식 html과 javascript를 결합한 방식으로 컴포넌트를 만든다. 리액트는 선언적 접근방식으로 작성한다. 리액트는 최종상태를 정의하고, 화면에 불러오기위한 지시사항들을 뒷단에 생성 - 명령형 접근방식(imperative appr..