Props

Props는 속성을 나타내는 데이터이며, 컴포넌트에 쓰인다.
컴포넌트의 두 가지 예를 보자.

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

위의 코드는 '함수 컴포넌트'라고 하며 js의 함수 형태이다.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

위의 코드는 '클래스 컴포넌트'이며
리액트의 관점에서는 위의 두 가지 유형이 같다고 할 수있다.
하지만 각자의 특징이 있기 때문에 컴포넌트를 다루는 시간에 알아놓자.

리액트가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달함.
이 객체를 'Props' 라고한다.

• Props는 꼭 정해진 명칭이 아니며 이름은 원하는데로 작성해주면 되고 형태만 맞춰주면 된다.
• 이름을 짓는 팁은 사용될 context가 아닌 컴포넌트 자체의 관점에서 짓는 것이 좋다.

예시를 한번 보자!! (Hello, Kng)를 렌더링 하는 예시

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

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Kng" />;
root.render(element);

1. <Welcome name="Kng" />엘리먼트로 root.render()를 호출
2. 리액트는 {name: 'Kng'} 를 Props로 하여 Welcome 컴포넌트를 호출
3. Welcome 컴포넌트는 결과적으로 <h1>Hello, Kng</h1> 엘리먼트를 반환
4. 리액트 DOM은 <h1>Hello, Kng</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트

• React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리. 예를 들어
  <div />는 HTML div 태그를 나타내지만, <Welcome />은 컴포넌트를 나타내며 범위 안에 Welcome이 있어야 함!!
• 제대로 규칙을 지키지 않으면 실행되지 않으니 꼭 확인바람!!
  공식문서 url =>
  https://ko.reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

props는 읽기 전용!!
함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트 자체 props를 수정해서는 안됨.
모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 함.

순수 함수란,
부수효과가 없는 함수 즉, 어떤 함수에 동일한 인자를 주었을 때 항상 같은 값을 리턴하는 함수 (외부의 상태를 변경하지 않는 함수)
예시코드(순수 함수)

function sum(a, b) {
  return a + b;
}
입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하기 때문에 순수 함수

useState

useState를 어떻게 사용하는지 먼저 확인하자!
const [state, setState] = useState();
위와같은 형식이며 하나씩 보자면
state는 내가 사용할 최종 객체라고 생각하면 된다.
setState는 쉽게 말해 state를 편집하는 것이다. 어떤 요소가 들어갈지, 추가할지 뺄지 등등 state를 셋팅한다고 보면 된다.
useState()가 있어야 stats,setState기능이 활성화 되며, ()안에는 초기값이 들어가게 된다. ( 당연히 초기값이 없으면 비워두면 됨 ("") )

자세한 활용 방법은 이후에 만들 'To do List' 글을 확인하자!

useEffect

useEffect는 useEffect가 포함된 컴퍼넌트가 렌더링 될때마다 실행하는 함수이다.
의도치 않게 리랜더링이 되는 경우( input에 value를 입력하는 경우 )에 useEffect가 계속 실행이 되는데, 이런 문제를 해결하기위해 의존성 배열을 사용한다.

useEffect(() => {
	console.log("hello useEffect");
}, []);	// 비어있는 의존성 배열

최초 랜더링 후 useEffect가 실행이 되고 이후에는 배열안에 값이 바뀔때마다 useEffect가 실행이 되는 것이다. 빈 배열이기 때문에 최초 랜더링 이후에는 작동하지 않는다.