코드스테이츠 소프트웨어엔지지어링 부트캠프 +29일

오늘한것

객체 코플릿, 리액트복습, Koans복습했다.
복습을 하고 얻은것이 꽤 있다.

 

리액트에선 변수가 state다

말 그대로 리액트에서는 변수를 state로 사용한다. 그리고 state의 업데이트는 오직 useState로만 할 수 있음.

새로운 값 할당은 물론이고 , pop(), unshift() 등 어떤것도 사용하면 안된다. 사용할 시 리렌더링이 되지 않는등의 문제가 일어날 수 있다.

아고라스테이츠 답장

const Tweet = ({ tweet }) => {
  return (
    <li key={tweet.id} className="tweet">
     ..이하생략

위와 같은 Tweet컴퍼넌트가 있고 아래 코드에서 Tweet컴퍼넌트의 props를 이용해 dummyTweets의 각 요소를 전달했다.

<ul className="tweets">
        {dummyTweets.map(i=>{
        return (
          <Tweet tweet = {i}/>
        )
})}
</ul>

dummyTweets는 다음과 같은 배열이다.

 

[ {id:1,name:'김코딩'} , {id:2,name:'박해커'} , {id:3,name:장동건} ,...., {id:5,name:손흥민} ]

 

이때 map()에 의해 Tweet내의 <li>태그의 key 속성에 dummyTweet의 id값이 할당된다고 생각헀는데 자꾸 unique한 key를 입력하라는 에러가 뜨는 것이다.

 

아고라스테이츠에서 온 답변은 map은 <Tweet />안에 id가 있는것을 모르고 그냥 Tweet컴퍼넌트 자체만 인식하기 때문에 따로 map을 넣어줘야한다는 것!

{dummyTweets.map(i=>{
        return (
              <div key = {i.id}>
                  <Tweet tweet = {i}/>
              </div> 
             )
})}

바로 이렇게 !

호이스팅

호이스팅이 어떤건지 먼저 말하자면 함수,변수선언을 죄다 모아서 먼저 선언한 후에 남은 코드를 실행한다.
주의할 점은 함수 선언중에 함수 표현식,화살표 함수는 호이스팅이 되지 않는다.

 

let funcExpressed = 'to be a function'; 

    console.log(funcExpressed) 
    console.log(funcDeclared()) // 함수 호이스팅에 의해 funcDeclared 함수 선언이 먼저 된 후에 이 console.log가 실행된다.

    function funcDeclared() {
      return 'this is a function declaration';  //함수선언식이라 제일 위로 이동한다
    }

    funcExpressed = function () {
      return 'this is a function expression';  //함수 표현식에는 호이스팅이 적용되지 않아서 console.log가 다 끝난 후에 실행된다.
    };

호이스팅은 변수, 함수의 선언을 문서 최상위로 끌어올린 뒤 undefined 를 할당한 후에 주어진 할당과 함수 실행을 차례로 하는 것이다.

위의 코드 같은 경우에는 주석에 적어놓은대로

 function funcDeclared() {
      return 'this is a function declaration'; 
    }

이 코드가 위로 올라간다.