[TIL] 230613

Hook

State

const [ value, setValue ] = useState( 초기값 )

value와 onChange는 항상 묶어서 사용한다. (관리 용이)

function App() {
  const [id, setId] = useState("");

  const onChangeIdHandler = (event) =>{
    setId(event.target.value);
  };

  const onChilckButtonHandler =  () =>{
    alert(`고객님이 입력하신 아이디는 ${id}이며 비밀번호는 ${pw}입니다.`);
    setId("");
    setPw("");
  }
  return (
    <div>
      <div>
        아이디: {" "}
        <input
        value={id}
        type='text'
        onChange={onChangeIdHandler}
        ></input>
      </div>
      <button
      onClick={
        onChilckButtonHandler
      }>로그인</button>
    </div>
  )
}

불변성 & 순수함수

React는 state의 변경이나 새로운 props가 오면 rendering한다.
같은 주소를 가리키는 것은 서로 다른 주소를 가리키게 만들면 rendering된다.
Vanila JS로 조작하는 DOM 은 명령형으로, 하나하나 어떤 절차가 필요한지 작성해주어야 하지만, React는 우리가 코드를 작성하면 절차를 자동으로 수행해준다.

Styling, map

css파일에서와 js에서 스타일 선언은 살짝 다르다
예를들어, js에서는 alignItems인데 css에서는 align-items라고 작성한다.

const testArr = ['감자','고구마','오이','가지','옥수수']
  return (
    <div className='app-style'>
      {
        testArr.map(function(item) {
          return <div className='app-box'>{item}</div>;
        })
      }
		</div>
  );

Warning

bundle.js:33591 Warning: Each child in a list should have a unique "key" prop.
map을 사용했을 때 발생하는 주의사항이다.
어떤 것인지 구분하기 위한 id가 필요하다는 뜻이다.
특별한 것

return <div key={item.id} className='app-box'>{item.age} - {item.name}</div>

key={} 를 사용해주어서 구분해준다.

함수 넘겨주는 것 주의

<button onClick={() => clickDeleteButtonHandler([item.id](http://item.id/))}>x</button>

<button onClick={clickAddButtonHandler}>추가</button>

괄호를 쓸 때에는 앞뒤로 매개변수 주고 받는 구간이 필요하다.

새로운 형식의 문법에 익숙해지면 괜찮아질 것 같다.
반복처리는 map으로 처리하고 컴포넌트 분리를 위해서는 데이터의 상호작용을 어떻게 이루어지는지에 대한 이해가 필요하다.