모듈 소개 - 리액트로 웹앱을 구축하는 것은 컴포넌트를 만들고 로직이 동작하도록 하는 것이다. - 그리고 앱을 스타일링 하는 것이기도 하다. - 조건부로 혹은 동적인 방법으로 스타일을 설정하는 방법을 알아보자 - 스타일을 적용하는 컴포넌트의 범위를 정하기 위해 전역스타일로 추가하지는 않는다. - Styled Components 사용 - css 모듈이라는 개념 살펴보기 동적 인라인 스타일 설정하기 - 스타일이 적용된 방식 - 일반적인 class 선택자로 css 설정 - trim() 메소드는 과도하게 설정된 공백을 지워준다. - inline style 속성에 객체로 조건문을 설정해 줄 수 있다. style={{ borderColor: !isValid ? 'red' : 'black', color: !isVal..

모듈 소개 - 목록과 조건부 컨텐츠를 어떻게 렌더링 하는지 알아보기 - 페이지에서 데이터 배열을 출력하고 다양한 조건에서 다양한 컨텐츠 보여주기 데이터의 렌더링 목록 - 배열의 요소별로 하나씩 expense 아이템을 렌더링 하기 - JSX코드에서 자바스크립트를 실행하기 위해 JSX코드 안에 {} 중괄호를 사용 - 표준 자바스크립트 배열 메소드인 .map() 메소드 - map은 다른 배열을 기반으로 새로운 배열을 생성하는데, 원본 배열에 있는 모든 요소들을 변환한다. - 이 변환 작업을 적용하기 위해 함수 형태로 함수가 실행되면 배열의 모든 아이템에 map 을 호출해 새로운 배열에 추가한다. - JSX코드의 일부로 JSX요소의 배열을 가졌다면 리액트는 JSX요소를 나란히 렌더링 할 것이다 ([, , ]) ..

양식 입력 추가하기 - 양식 입력을 위한 form 태그를 별도로 분리한다. - input[type="number"]는 step을 설정할 수 있고 - input[type="date"]는 날짜 선택기를 제공하고, 날짜의 범위를 min과 max로 지정할 수 있다. 사용자 입력 리스닝Listening - 입력에서 발생하는 이벤트를 가지고 와서 저장하기 - 우선 요소에게 리스너를 추가해야 한다. - onInput이나 onChange는 같은 타입의 input에 사용할 수 있다. - onChange={함수} 로 붙일 수 있고 onChange={함수()}처럼 실행하지 않는다. - addEventListener를 사용했 던 것처럼 event를 인자로 주게 되면 자동적으로 변경 이벤트가 발생했을 때 이벤트 객체를 받을 수..

모듈 소개 - 리액트의 중요한 기본 개념 - 컴포넌트, props - 사용자와 상호작용에 대해 공부 - 사용자 이벤트 다루기 - state - 리액트는 선언적인 접근 방식을 사용. - 원하는 목표 상태를 정의하고 리액트가 그 상태에 도달하도록 처리 이벤트 리스닝 및 이벤트 핸들러 수행하기 - 이벤트가 상태의 변화를 촉발 - 클릭했을 때 리액트가 반응하도록 하는 것은 내장된 HTML 요소에서 수신할 수 있는 모든 DOM 이벤트에 접근할 수 있다. - JSX요소에서 props를 추가해서 이벤트 리스너를 적용한다. ex) onClick과 같이 on으로 시작 - 이런 on props는 함수가 필요하고 on props로 함수를 실행한다. - 함수를 전달할때는 return 전에 함수를 선언하고 ()를 빼고 실행한다..

컴포지션의 개념 chlidren prop - 리액트에서는 컴포넌트가 가장 중요하다. 이런 컴포넌트에 추가할 수 있는 기능에 대해 배운다. - 컴포넌트는 아주 중요하다. - 컴포넌트 안으로 데이터를 전달하기 위한 props도 중요하다. - 컴포넌트는 JSX 코드를 결합한 사용자 정의 HTML이고 스타일링이다. - 원한다면 자바스크립트 로직을 추가할 수 있다. - props를 통해 모든 것을 설정하는 컴포넌트가 아니라 열고 닫는 태그 사이에 컨텐츠를 전달하고 싶을 때가 있다. - 사용자 지정 컴포넌트를 일종의 컨텐츠를 감싸는 래퍼Wrapper로 사용할 수 없다. - 내장된 HTML 요소인 div나 h2는 사용 가능하다. - chlidren은 예약어이다. - props.children의 값은 사용자 지정 컴포..

JSX에서 동적데이터 출력 및 표현식 작업하기 - 컴포넌트와 HTML이 정의되면 그것을 재사용하려고 한다. - 일반적으로 만드는 컴포넌트의 데이터들은 고정되어 있지 않다. - 어떤 데이터는 고정될 수 있지만 제목, 양, 날짜 등은 동적인 것으로 변화하기 때문에 HTML 코드로 고정되면 안된다. - 컴포넌트는 HTML과 CSS, 자바스크립트의 조합이다. - 컴포넌트에서 자바스크립트 코드는 함수의 return 전에 입력한다. - 보통은 HTML에 데이터를 고정 코드로 입력하지 않는다. - 대신 동적 데이터 출력을 위해 JSX 코드 안에서 중괄호를 사용해서 기본적인 자바스크립트 코드를 실행할 수 있다는 것이다. - 예를 들어 1+1이나 math.random()같은 메소드나, 변수, 반복문, 조건문을 사용할 수..