[ReactJS] JSX 와 Props

JSX

React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다. - React 공식문서

---

이 말을 100% 다 이해는 못했지만 jsx는 마크업과 로직을 인위적으로 분리하지 않는 방식을 말하는것 같다.

const element = <h1>Hello, world!</h1>; // this is jsx

마크업을 그냥 변수에 넣어어 쓴다.

그냥 html로 보일수 있지만 이것은 javascript이다. 아마 컴파일할때 javascript으로 바뀌어서 컴파일될것이다.

const element = <h1>Hello, {formatName(user)}!</h1>;
console.log(element);

콘솔로 찍어보면(react로 컴파일될수 있는 환경을 만들어야 한다. 일반 브라우저에서 콘솔찍으면 당연히 안나옴!)

콘솔을 찍어보면,

객체 형태이고 여러 프로퍼티가 있는것을 볼수가 있다. 그중에서 props property에 data가 있는것을 볼수가 있다.

---

props

props 는 react element 객체의 property중 하나로,

객체형태를 가지고 있다.(외부에서 받은 data라고 생각하면 편할것 같다.)

react의 element는 사용자 정의 컴포넌트로도 나타낼수가 있다. (이것이 강점인것 같다.)

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;// 사용자가 정의한 컴포넌트 엘리먼트


ReactDOM.render(
  element,
  document.getElementById('root')
);

react는 사용자가 정의한 컴포넌트를 발견하면 해당 어트리뷰트data를 연결된 함수(컴포넌트)에 "props" 라는 객체로 넘긴다.

const element = <Welcome name="Sara"/>;

console.log(element);

어트리뷰트로 설정한 "Sara" data가 props에 들어가 있는것을 볼수가 있는데 바로 이 props가 연결된 함수(컴포넌트)에 인자로 들어가게 되는 것이다.

 

props는 읽기 전용

컴포넌트에서서 받은 props들은 그 data자체를 수정하여서는 안된다. (순수함수처럼 작동해야 한다.)

function sum(a,b){
  return a + b;
}
// this is pure function

순수함수 input값에 대하여 항상 일정한 결과를 반환한다. (들어온 a,b 값을 바꾸지 않는다.)

function withdraw(account,amount){
  account.total += amount;
}
//this is not a pure function

account의 total을 바꾸는 (결국 account의 값을 바꾼다.) 함수이기 때문에 순수함수가 아니다.

즉, props는 아래 2번째 예시처럼 사용해서는 안되는것이다.

모든 React컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다. - react 공식문서