0813 TIL State & Props

냐하호후·2021년 8월 13일

TIL

목록 보기

27/101

🙆‍♀️ state, props의 개념에 대해서 이해하고, 실제 프로젝트에 바르게 적용할 수 있다.

🙆‍♀️ React 함수 컴포넌트(React Function Component)에서 state hook을 이용하여 state를 정의 및 변경할 수 있다.

🙆‍♀️ React 컴포넌트(React Component)에 props를 전달할 수 있다.

🙆‍♀️ 이벤트 핸들러 함수를 만들고 React에서 이용할 수 있다.

🙆‍♀️ 실제 웹 애플리케이션의 컴포넌트를 보고 어떤 데이터가 state이고 props에 적합한지 판단할 수 있다.

🙆‍♀️ 실제 웹 애플리케이션 개발 시 적합한 state와 props의 위치를 스스로 정할 수 있다.

🙆‍♀️ React의 단방향 데이터 흐름(One-way data flow)에 대해 자신의 언어로 설명할 수 있다.

리액트의 전달 주체는 부모 컴포넌트이다. 데이터 흐름이 top-down인 하향식이다.

usestate는 구조분해할당을 활용하고있었다.

input tag는 글씨가 textContent가 아니라 value다.

구조분해할당

배열 분해하기

let arr = ["Bora","Lee"]
let [firstName,surname] = arr
console.log(firstName) // "Bora"
console.log(surname) // "Lee"

객체 분해하기

let options = {
title : "Menu",
width : 100,
height : 200
}

let{title,width,height} = options

console.log(title) // "Menu"
console.log(width) // 100
console.log(height) // 200

이벤트 핸들러

HTML 속성으로 정의

<input type = "button" onclick ="alert('버튼 클릭됨!')" ></input>

onclick 속성에 자바스크립트 코드를 직접 작성하거나이벤트 처리를 위해 구현한 함수를 호출합니다. onXXX 를 이용해 여러 이벤트 핸들러 속성을 부여하는 것도 가능 합니다.

자바스크립트 에서 정의

  <script>
  document.getElementById('b1').onclick = function() {alert("버튼 클릭됨!!")}
</script>

<body>
  <input type="button" id="b1">
</body>

document.getElementById() 메서드는 HTML문서에서 지정한 id 속성을 찾아 바인딩 합니다.
이벤트 발생시 할당된 함수부가 호출 되어 콜백 함수 라고 합니다.

내가 써본 이벤트 핸들러

유효성검사 sprint때 작성한 이벤트함수다.

elInputPasswordRetype.onkeyup = function() {
  passwordFlag = isMatch(elInputPassword.value,elInputPasswordRetype.value)
  if(passwordFlag){
    //일치한다면
   elMismatchMessage.classList.add('hide')
   elInputPasswordRetype.classList.remove('underline')
  }
  else{
    //일치하지 않는다면
    elMismatchMessage.classList.remove('hide')
    elInputPasswordRetype.classList.add('underline')
  }
}

onkeyup = 함수자체를 넣어줬다. 만약 함수를 표현식으로 썼더라면
onkeyup = 함수이름 이렇게 작성했을 것이다.
표현식을쓰든 두번째처럼 선언문으로 쓰든 어쨋든 함수()가 아니라 함수 그 자체를 넣어준것이다.

근데 html에서는
<button>Event</button>
이렇게 썼을 것이라고 작성되어있다.

물론 유효성검사 sprint의 코드는 js파일에 작성한거다. queryselector를 사용해서 변수를 이용해서 이벤트를 js파일에 만든거다.
html파일에서 onclick을 주려면 js파일의 함수를 실행해야해서 ()를 붙인 것이다.

그 외

const [name,setName] = useState("") useState옆 초기값을 2개로 설정하면 오류가 안나고 undefined가 나온다고한다 ㅂㄷㅂㄷ

useState를 여러번 쓰기 귀찮다면 초기값자리에 객체로 여러 속성들을 적을 수 있다. useState에 익숙해지면 그 때 사용해보자.

부모컴포넌트에서 변수에 넣은건 다 자식컴포넌트에 props로 전달해 줄 수 있다.

state나 props를 직접 계산할수 있다면 그것은 state가 아니다.
-> 만약 state와 props를 통해서 계산이 가능하다면 굳이 해당 데이터를 상태(state)로 관리할 필요가 없다.

map 메소드만 알았는데 Map이라는것이 key와 value를 만들게한다는것을 알았다. 신기하다 ㅎㅎ

냐하호후

DONE is better than PERFECT

이전 포스트

0812 TIL React

다음 포스트