리액트는 컴포넌트 기반(Conponent-Based)이다. 리액트에서는 모든 페이지가 컴포넌트로 구성되어있고, 하나의 컴포넌트는 또 다른 여러 컴포넌트의 조합으로 구성될 수 있다. 그리고 이런 컴포넌트들을 마치 레고블록 조립하듯 끼워맞춰서 새로운 컴포넌트를 만들 수 있는것이다. 리액트 컴포넌트에서의 입력은 props고, 출력은 React Element가 된다. 결국 리액트 컴포넌트가 하는 역할은 어떠한 속성들을 입력으로 받아서 그에 맞는 리액트 Element를 생성하여 리턴해주는 것이다. Props 란?Property의 줄임말이다. 리액트 Component의 속성이고, 컴포넌트에 전달한 다양한 정보를 담고 있는 자바스크립트 객체이다.props의 특성1. Read-Only (읽기 전용) 이다. -> 값을 ..

리액트 공식 홈페이지에서는 Element를 다음과같이 정의하고있다.Elements are the smallest building blocks of React apps.Element는 리액트 앱의 가장 작은 블록들이라는 것이다.리액트 Elements는 자바스크립트 객체 형태로 존재한다. 아래 코드는 버튼을 나타내기 위한 Element 코드이다.{ type: 'button' props: { className: 'bg-green', children: { type: 'b', props: { children: 'Hello, element!' } } }}위의 코드가 실제로 렌더링될 때 DOM..

JSXJavaScript + XML/HTML 이 결합된 구조이다. JSX 코드 예시const element = Hello, world!; JSX의 역할내부적으로 XML/HTML 코드를 JavaScript로 변환한다. → JSX코드로 작성해도 결과적으로는 JavaScript 코드가 나오게 된다.JSX → JavaScript로 변환하는 함수가 바로 React.createElement 함수이다!React.createElement( type, [props], [...children]) JSX를 사용한 코드class Hello extends React.Component { render() { return Hello {this.props.toWhat}; }}ReactDOM.render..

React 자바스크립트 UI 라이브러리 React는 Vue와 달리 프레임워크가 아닌 라이브러리이다. 프레임워크와 라이브러리의 차이점은 흐름 제어의 권한에 있다. 프레임워크는 제어의 권한이 프레임워크 자신에게 있는데에 반해, 라이브러리는 제어권한이 개발자에게 있다. 리액트의 장점 1. 빠른 업데이트와 렌더링 속도(화면에 나타나는 내용이 바뀌는 것) -> virtual dom을 사용한다. 2. 컴포넌트 기반 구조(레고 블록을 조립하듯 컴포넌트들을 모아서 개발한다. 이로 인해 재사용성이 높아지고 개발기간이 단축된다.) 3. 유지보수 용이(해당 모듈만 수정하면 된다.) 4. 활발한 지식공유 & 커뮤니티 리액트의 단점 1. 방대한 학습량 2. 복잡한 상태관리(props, state...) 간단한 리액트 적용 실습..