[생활코딩/React] 5. props (Ver. 2022 개정판)

이는 유튜브 <생활코딩 React 2022 개정판> 강의를 보고 정리한 내용입니다.

✔️props 사용하기

---

React에서 속성은 Properties를 줄여 Props라고 한다.
이 Props는 입력값이다.
이 안에는 객체가 들어간다.

function Counter(props) { // 2. 파라미터 props 설정
  return <div>
    <h1>{props.title}</h1> // 3. 호출 
    <button>+</button> {props.initValue} // 3.1 호출 
  </div>
}

function App() {
  return (
    <div>
      <Counter title="불면증 카운터" initValue={10}></Counter> // 1. 속성 부여(title, initValue), 4. 호출
    </div>
  );
}

📝

1. Counter 태그에 title이라는 속성과 "불면증 카운터"라는 값을 부여했다.
2. 그리고 컴포넌트의 첫 번째 파라미터는 props라 명칭.
   3.일반 문자열이 아닌 변수로서 데이터를 평가하여 출력하게 하고 싶다면 함수의 리턴값에서 중괄호({})로 감싸주어야 한다.
   3.1 Counter 태그의 initValue 역시 원하는 JavaScript의 데이터 타입으로 출력하고 싶다면 중괄호({})로 감싸주어야 한다.
   큰따옴표(")를 사용하면 문자열로 평가된다.

✔️JSX

JavaScript의 확장 문법으로 HTML 문법을 그대로 사용할 수는 없다.
대표적으로 class와 for가 있는데,

// CSS에 class를 적용하는 속성 
<p class="hello">안녕!</p> // <p className="hello">

//Javascript - 객체지향의 개념으로 class 키워드 사용
class Hello {
  console.log('Hello!');
}

JSX에서 class 속성을 사용하려면 className 으로 작성해야 합니다.

//HTML에서의 for
<form>
  <label for="name">이름</label> // label 태그에서
  <input id="name" type="text" /> // input 태그와 함께 사용
</form>

반면에 Javascript에서는 반복문에서 for를 사용
JSX 문법으로 HTML의 for 속성을 사용하기 위해선

<form>
  <label htmlFor="name">이름</label> // htmlFor 라고 작성
  <input id="name" type="text" /> 
</form>

✔️ 이벤트 핸들러 작성

소문자로 작성하던 이벤트 핸들러들은 JSX 문법으로 작성하면
두 번째 단어부터는 첫 글자를 대문자로 작성해야한다.
이를 카멜 표기법이라 한다.