React

Udemy의 React 강의를 수강하고 있다. 물론 좋은 강의이지만 영어로 되어 있어 자막과 코드 화면을 동시에 보느라 제대로 이해하지 못한 채 코드를 따라치기에도 바쁜 나를 발견했다. 더 깊고 정확한 이해를 위해 자습서: React 시작하기부터 시작해 공식문서를 읽으

JSX 소개JSX는 React 엘리먼트를 생성하는 문법이다.React는 JS파일 내에서 마크업과 로직을 포함하는 컴포넌트라는 느슨하게 연결된 유닛으로 관심사를 분리한다.JSX의 중괄호 안에는 모든 JS 표현식을 넣을 수 있다.JSX 표현식은 컴파일 후에 정규 JS 함수

엘리먼트 렌더링엘리먼트는 React 앱의 가장 작은 단위이며 화면에 표시할 내용을 기술한다.브라우저의 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있다. ReactDOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다.위의 div

Components와 Props컴포넌트는 props라는 임의의 입력을 받아 화면에 어떻게 표시될 지 기술하는 React 엘리먼트를 반환한다.클래스 컴포넌트에는 몇 가지 추가 기능이 있다. 다만 함수 컴포넌트가 더 간결하다.컴포넌트를 정의하는 가장 간단한 방법위 함수는

State and Lifecyclerender() 메서드의 this.props.date 를 this.state.date로 수정초기 this.state를 지정하는 constructor 추가 클래스 컴포넌트는 항상 props로 기본 constructor를 호출해야 한다.d

이벤트 처리하기React 엘리먼트에서의 이벤트 처리방식은 DOM 엘리먼트에서의 방식과 유사하다. 다만React는 camelCase를 사용한다.JSX를 통해 문자열이 아닌 함수로 이벤트핸들러를 전달한다.기본 동작을 방지할 때 preventDefault를 명시적으로 호출해

조건부 렌더링React에서의 조건부 렌더링은 JS에서의 처리와 같이 동작한다.위의 코드는 isLoggedIn props를 받아 Boolean 값에 따라 다른 컴포넌트를 렌더링한다.엘리먼트를 저장하기 위해 변수를 사용할 수 있다.위의 코드를 중괄호 안에 더 짧은 구문의

조건부 렌더링React에서의 조건부 렌더링은 JS에서의 처리와 같이 동작한다.위의 코드는 isLoggedIn props를 받아 Boolean 값에 따라 다른 컴포넌트를 렌더링한다.엘리먼트를 저장하기 위해 변수를 사용할 수 있다.위의 코드를 중괄호 안에 더 짧은 구문의