JSX

React를 사용할 때는 html보다 JSX를 많이 사용합니다.

JSX(Javascript syntax extension)는 자바스크립트의 확장 문법입니다.

 

JSX를 이용하면 UI를 나타낼 때 자바스크립트(logic)와 HTML구조(markup)를 같이 사용할 수 있기 때문에 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현할 수 있습니다.

 

JSX를 사용하면서 주의해야 할 문법들(문법 규칙)

JSX는 컴포넌트에 여러 엘리먼트 요소가 있다면 반드시 부모 요소 하나로 감싸줘야 합니다.

 

Props를 통해 컴포넌트 간 데이터 전달하기

this.props.데이터 이름 을 통해 불러옵니다.

 

Key 속성 이해하기

React에서 요소의 list를 나열할 때는 Key를 넣어줘야 합니다.

Key는 React가 변경, 추가 또는 제거된 항목을 식별하는 데 도움이 됩니다.

요소에 안정적인 ID를 부여하려면 배열 내부의 요소에 키를 제공해야 됩니다.

 

React는 가상 돔을 이용해서 바뀐 부분만 실제 돔에 적용한 것을 앞서 배웠습니다.

Key를 이용해서 어떠한 부분이 바뀌었는지 인식할 수 있습니다.

 

key에는 유니크한 값을 넣어줍니다. index는 비추천입니다. index는 변경될 수 있어서 유니크하지 않습니다.

 

React State란?

React에서 데이터가 변화할 때 화면을 다시 렌더링 해주기 위해서는 React State를 사용해야 합니다.

React State는 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체입니다.

(State가 변경되면 컴포넌트는 Re-rendering됩니다. 또한 State는 컴포넌트 안에서 관리됩니다.)

constructor로 감싸주고 super(인수)를 해줍니다.

this.state안에는 변경할 데이터들을 입력해줍니다.

 

super(props)란?

Constructor(생성자)를 사용하면 인스턴스화된 객체에서 다른 메소드를 호출하기 전에 수행해야 하는 사용자 지정 초기화를 제공할 수 있습니다.

클래스를 new를 붙여서 인스턴스 객체로 생성하면 넘겨받은 인수와 함께 constructor가 먼저 실행됩니다.

 

자바스크립트에서 super이란

- super 키워드는 자식 클래스 내에서 부모 클래스의 생성자를 호출할 때 사용됩니다. => super(변수)

- super 키워드는 자식 클래스 내에서 부모 클래스의 메소드를 호출할 때 사용됩니다. => super.functionOnParent(변수)

 

super를 먼저 사용해야 뒤에 this를 사용할 수 있습니다.

 

State

1. 부모 컴포넌트에서 자녀 컴포넌트로 데이터를 보내는게 아닌 해당 컴포넌트 내부에서 데이터를 전달할 때 사용
2. State는 변경 가능(Mutable)
3. State이 변하면 re-render 됨

Props

1. Props는 Properties의 줄임말입니다.
2. Props는 상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터등을 전달하는 방법입니다.
3. Props는 읽기 전용(immutable)으로 자녀 컴포넌트 입장에서는 변하지 않습니다.(변하게 하고자 하면 부모 컴포넌트에서 state를 변경시켜줘야 함)