React States & Props

Props 는 객체형태의 함부로 변경될 수 없는 읽기전용객체
부모컨퍼넌트에서 자식컨퍼넌트로 데이터를 내려줄 때 사용한다.

< 첫번째 방법 >

부모컴포넌트
// <Child text={"I'm child"} /> - attribute는 바꿀 수 있다.

자식컴포넌트
function Child(props) {
return (

<div className="child">
  <p>{props.text}</p>.  // {key:value}. === {attribute : value}
</div>

);
};

< 두번째 방법 >

function Parent() {
return (

<div className="parent">
    <h1>I'm the parent</h1>
    <Child>I'm the eldest child</Child>.   //. !!
</div>

);
};

function Child(props) {
return (

<div className="child">
    <p>{props.children}</p>.   //!!
</div>

);
};

---

State 는 상태가 변하는 값으로 저장 변수와 저장변수를 갱신하는 함수를 사용한다.

function CheckboxExample() {
const [isChecked, setIsChecked] = useState(false);
// const [state 저장 변수, state 저장변수를 갱신하는 함수] = useState(상태 초기 값);
useState = state hook , false = state초깃값

Ex ) 삼항연산자 사용 예시 (isChecked는 boolean값)
{isChecked ? "Checked!!" : "Unchecked"}

< 완성된 체크박스 컴포넌트 예시 >
function CheckboxExample() {
const [isChecked, setIsChecked] = useState(false);
// false 자리는 상태초기값
const handleChecked = (event) => {
setIsChecked(event.target.checked);
};

return (

<div className="App">
  <input type="checkbox" checked={isChecked} onChange={handleChecked} />
  <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
</div>

);
}

---

이벤트 처리

1. 함수의 값이 아닌 함수 자체가 담겨야한다

2. HTML => < button>Event< /button>
   React => < button onClick={handleEvent}>Event< /button>

< onChange >

• input , textarea , select 에 사용가능

  input텍스트가 바뀔 때마다 발생하는 이벤트 / 이벤트가 발생하면 handleChange 함수가 작동하여 이벤트 객체에 담긴 input 값을 setState 를 통해 새로운 state(name)을 갱신한다.

function NameForm() {
const [name, setName] = useState("");

const handleChange = (e) => {
setName(e.target.value);
}

return (

<div>
  <input type="text" value={name} onChange={handleChange}></input>
  <h1>{name}</h1>
</div>

)
};

< onClick >

• a , button 에 사용가능

// 함수 정의하기
return (
< div >
...
< button onClick={() => alert(name)} >Button< /button >
...
< /div >
);
};

// 함수 자체를 전달하기
const handleClick = () => {
alert(name);
};
return (
< div >
...
< button onClick={handleClick}>Button< /button>
...
< /div>
);
};

---

< Controlled Component >

1. 리액트 개발 방식 = 컴포넌트 단위 개발
   페이지를 만들기 이전에 컴포넌트를 먼저 만들고 조립
   상향식 앱 개발 ->. 테스트가 쉽고 확장성이 좋음
2. 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 속성처럼 전달받을 수 있다.
   즉 데이터를 전달하는 주체는 부모 컴포넌트
   데이터 흐름은 하향식
3. React는 단방향 데이터 흐름을 따른다
4. 컴포넌트는 props를 통해 전달받은 데이터가 어디에서 왔는지 알지 못한다.
5. 상태 위치 정하기
   두개의 서로 다른 컴포넌트가 특정 상태에 영향을 받는 경우?
   -> 공통 소유 컴포넌트(공통의 부모)를 찾아 그 곳에 상태를 위치시켜야 한다.
6. 역방향 데이터 흐름 추가
   부모 컴포넌트의 상태가 하위 컴포넌트에 의해 변하는 경우?
   ->State 끌어올리기로 해결
   ->상태를 변경시키는 함수를 하위 컴포넌트에 props로 전달해서 해결