🔗 React

🔗 JSX

JSX( Javascript Syntax Extension )는 자바스크립트의 확장 문법.

리액트에서는 이 JSX를 이용해서 화면에서 UI가 보이는 모습을 나타내준다. JSX를 이용하면 UI를 나타낼때 자바스크립트(logic)와 HTML구조(markup)를 같이 사용 할 수 있기때문에 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현할 수있다.
리액트에서 JSX사용의 의무는 아니지만 자바스크립트 안에서 UI작업을 하는데에 아래의 로직처럼 너무 편리하기때문에 많이 사용한다.

class App extends Component {
  render() {
    return (
      <main>
		<h1>Hello!!</h1>
        <p>오늘은 리액트 공부하는 날!</p>
        <div>
          <SpanComponent />
        </div>
      </main>
    )
  }
}

원래 리액트에서 화면을 그리는 방식은 React.createElement API를 사용해서 엘리먼트를 생성한 후(객체가 됨) 이 엘리먼트를 In-Memory에 저장하고 ReactDOM.render( ) 함수를 사용해서 실제 웹 브라우저에 그려준다.

JSX는 createElement를 쉽게 사용하기 위해 사용하지만 모든 UI를 만들때마다 createElement를 사용해서 컴포넌트를 만들수는 없기때문에 JSX를 사용한 후 그것을 바벨이 다시 createElement로 바꿔서 사용한다.

📌 JSX를 사용하면서 주의해야할 문법 규칙은 컴포넌트에 여러 엘리먼트 요소가 있다면 반드시 부모 요소 하나로 감싸줘야한다.

Ex ) function hello(){
	return <div>
		여러 엘리먼트요소
	   </div>;
	}    

위의 코드에서 JSX의 부모 요소는 <div> </div>이다.

🔸 JSX Key 속성

리액트에서 요소의 리스트를 나열할때는 Key를 넣어줘야한다. 키는 React가 변경, 추가 또는 제거된 항목을 식별하는데 도움이 되어 요소에 안정적인 ID를 부여하려면 배열 내부의 요소에 키를 제공해야한다.
가상돔을 이용해서 바뀐 부분만 실제 돔에 적용하면 Key를 이용해서 어떠한 부분이 바뀌었는지 쉽게 인식 할 수 있다.

Key에는 유니크한 값을 넣어주는데 Index는 비추천된다. Index도 0부터 시작해서 유니크한 값을 가지지만 만약 리스트가 추가되거나 제거되면 해당 리스트들의 key값도 바뀌게된다. 예를 들어, 새로운 값이 인덱스0으로 들어오면 기존에 있던 모든 key값의 인덱스가 바뀌게 된다.

    fruits: [
      { id: 1, name: "바나나", amount: 4000 },
      { id: 2, name: "딸기", amount: 7000 },
      { id: 3, name: "수박", amount: 10000 }, // 유니크한 키 값 : id
    ]

🔗 Component

하나의 리액트는 여러가지 component로 구성되고 각 component는 또 다른 여러가지 component로 구성된다.
component를 쉽게 이해하자면 자바스크립트의 function의 역할이라 생각하면 된다. 즉 하나의 함수로 이해하면 된다.

입력 -> JS function -> 출력
입력 -> React component -> 출력

React는 소문자를 DOM태그(div, span 등)로 인식하기 때문에 component 이름은 항상 대문자로 시작해야 한다!!

• DOM태그를 사용한 element
  const element = <div />

• 사용자가 정의한 component를 사용한 element
  cibst ekement = <Welcome name="한국" />

🔗 State

state컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고있는 JS객체라 할 수 있다.

리액트에서 데이터가 변할 때 화면을 다시 렌더링 해주기 위해서는 React state를 사용해야 한다. state가 변경되면 컴포넌트는 리렌더링(Re-rendering)되고 state는 컴포넌트 안에서 관리된다. 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야하고 그렇지 않은 값은 component의 instance 필드로 정의된다.

🔗 Props

1. props는 properties의 줄임말 : 컴포넌트에 전달할 다양한 정보를 담고있는 JS 객체
2. props는 상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터 등을 전달하는 방법
3. props는 읽기전용으로 자녀 컴포넌트 입장에서는 변하지 않는다.
   (변하게하려면 부모 컴포넌트에서 state를 변경시켜줘야한다.)
   = 모든 리액트 컴포넌트는 props를 직접 바꿀수 없고 같은 props에 대해서는 항상 같은 결과를 보여준다.

🔸 super(props)

자바스크립트에서 super 키워드는 자식 클래스 내에서 부모 클래스의 생성자와 메소드를 호출할 때 사용된다. 생성자에서는 super키워드 하나만 사용되거나 this키워드가 사용되기 전에 호출되어야하는데 그 이유는 부모클래스의 생성자를 호출하기 전에 부모의 this를 사용하려고하면 정의가 되어있지 않은 this(=props)를 호출하기 때문에 문제가 되기 때문이다. React에서 this.state을 생성자에서 정의할때 super가 먼저와야 하는 이유도 이와 같다.

React에서 super에 props를 인자로 전달하는 이유는 React.Component 객체가 생성될때 props 속성을 초기화하기 위해 부모 컴포넌트에서 props를 전달하고 생성자 내부에서도 this.props를 정상적으로 사용할수 있도록 보장하기 위함이다.

🔗 State와 Props의 차이점

props는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터 등을 전달하는 방법이나 state는 해당 컴포넌트 내부에 데이터를 전달한다.
props는 (자녀컴포넌트 측에서) 읽기전용이지만 부모 컴포넌트의 state로 변하게 할 수 있다.