react - 기초

- 웹 프레임워크 자바스크립트의 라이브러리 중 하나

- 사용자의 인터페이스를 만들기 위해 사용됨

- facebook에서 제공해주는 프론트엔드 라이브러리임

- 싱글페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용

- 웹/앱의 View를 개발할 수 있는 라이브러리임

 

앵귤러, 뷰, 리액트

 

html, css, javascript --> 앵귤러, 뷰, 리액트

 

React 특징

1. Data Flow

react는 데이터의 흐름이 한 방향으로 흐르는 단방향 데이터 흐름을 가진다.

 

2. Component 기반 구조

component는 독립적인 단위의 소프트웨어 모듈을 말합니다.

독립적인 하나의 부품으로 만드는 방법

 

3. Virtual Dom

Dom (Document Object Model)

 

4. Props and State

Props(properties) - 컴포넌트의 속성을 설정

부모 컴포넌트에서 자식 컴포넌트의 속성을 설정함.

부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터

읽기 전용 데이터 자식 컴포넌트에서는 전달받은 props는 변경이 불가능함.

최상위 부모 컴포넌트에서만 props를 변경할 수 있음.

※State

컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있습니다.

동적인 데이터를 다룰 때 사용

사용자와 상호작용을 통해 동적으로 값이 변경될 때 사용합니다.

children

컴포넌트 태그 사이에 내용을 보여주는 props

 

5. JSX

리액트이 화면을 정의할 때 작성

html과 유사해보이지만 실제로는 javascript입니다.

1) 꼭 닫혀야 하는 태그

<div>

    <Hello/>

</div>

2) 태그는 꼭 감싸져 있어야 함

function App(){

    return(

        <>

            <Hello/>

            <div>안녕하세요</div>

        </>

    )

}

3) jsx에서 자바스크립트 표현식은 {} 묶어서 사용

4) if문 대신 삼항연산자 사용

5) class속성은 className속성으로 사용

 

react 컴포넌트

1. 함수 컴포넌트

function App() {
    return <div>

    </div>;

}

2. 클래스형 컴포넌트

class App extends Component {

    render() {

        return <div></div>;

    }

}