[20221126] 항해99 주특기 리액트 2일차👍(feat. 코딩애플)

아래와 같이 map함수를 사용함으로써 반복적으로 사용되는 html을 간단히 나타낼 수 있다. 그런데 여기서 각각의 게시물에 대해 따봉을 클릭할 때마다 따봉의 개수를 게시물마다 따로 업데이트해야하는데, 이 부분이 조금 어려웠다. 원본이었던 따봉 배열을 먼저 얕은 복사를 한 뒤에 수정을 해야하기 때문이었다. 이것에 대해 기술매니저님께 물어보니, 리액트의 클로저라는 특성때문에 원본을 쉽게 바꾸지 못한다고 한다. 그래서 반드시 복사를 한 뒤 복사본을 수정하고 변경함수에 넣어주어야한다는 것이다! 원본을 바꾸려면 아래의 따봉변경과 같은 useEffect 변경함수안에다가 로직을 짜면 가능하다고 한다. 그런데 그렇게 로직을 짜면 복잡한 로직은 가독성이 떨어지므로 따로 함수를 만드는 것이 좋다고 한다.

      {
        글제목.map(function(a, i) {
          return (
          <div className="list" key={i}>
          <h4>
            {글제목[i]}
            <span onClick={() => {
              let copy = [...따봉];
              copy[i] = copy[i] + 1;
              따봉변경(copy);
            }}>👍</span>
            {따봉[i]}
          </h4>
          <p>11월 25일 발행</p>
        </div>)
        })
      }

자식 컴포넌트가 부모 컴포넌트에 있던 state를 쓰고 싶으면 그냥 쓰면 안되고 props로 전송해서 써야한다. 이를 위해서 두가지 과정이 필요한데, 먼저 자식컴포넌트를 사용하는 곳에 가서 <자식컴포넌트 작명={state이름} /> 을 쓰고 자식컴포넌트 만드는 function으로 가서 props라는 파라미터 등록 후 props.작명을 사용하면 된다. state뿐 만이 아니라 변수나 함수, 문자열, 숫자도 전송가능하다.

 

한편 자식에서 부모로의 전송은 불가능하며 자식간의 전송 역시 불가능하다. 그러기에 다양한 컴포넌트에서 쓰이는 state는 컴포넌트들 중 최고로 높은 부모에게 만들어 놓아야 한다. props도 사실은 자바스크립트에서 쓰던 함수의 파라미터 문법과 같다고 보면 된다.

 

모달창과 같이 동적인 UI를 만들기위해서는 먼저 html css로 미리 디자인해놓고, 현재 UI의 상태를 state로 만들어두어야한다. 그리고 나서 state 종류에 따라서 UI가 어떻게 보일지 작성하면 된다. 예를 들어 글제목을 클릭 시 해당하는 글제목에 맞는 모달창을 만들어야한다면 어떻게 해야할까? 먼저 디자인은 이미 해놓은 상태이므로 가볍게 패스하고, title state를 만들러 가면 된다.  title state를 생각했을 때는 굳이 글제목 자체를 만드는게 아니라 0번째 것을 눌렀을 때 0번째 제목이 뜨면되는 식이라 숫자를 넣어주면되겠다. 그러고 나서 글제목이 클릭되는 순간 title state를 해당하는 숫자로 바꾼다. 여기서 해당하는 숫자는 map함수 안에 만들어진 i(인덱스)이다. 그렇게 클릭이 되는 동시에 모달창이 true가 되면서 생기고 또 동시에 클릭에 따라 바뀌어진 title로 바뀌어지고 이것이 그대로 Modal 함수안에 props.title로 이어져 나타나게 된다.

 

클릭 이벤트는 상위 요소로 퍼지는 데 이것을 이벤트 버블링이라고 한다. 그래서 span태그를 눌렀는데도 h4를 누른것으로 인식되어서 모달창이 열리게 된다. 이를 막기위해서는 "e.stopPropagation();" 코드를 쓰면 된다.

<input onChange={(e)=>{
        입력값변경(e.target.value);
        console.log(입력값)}}/>

그리고 위와 같이 input을 통해 입력한 값을 받아올때는 event를 활용하면 되는데 e.target.value로 state를 변경하여 입력값을 바꿀 수 있다.  근데 위 코드 실행해보면 a를 입력하면 콘솔창에 아무것도 안뜨고 aa를 입력하면 a만 콘솔창에 뜨게 된다. 왜냐면 state 변경함수 특징 때문인데 state 변경함수는 약간 늦게 처리된다고 한다. 전문용어로 async하게 (비동기적으로) 처리된다고 합니다. 그리고 자바스크립트에선 늦게 처리되는 코드들은 잠깐 제쳐두고 바로 다음줄을 실행해준다고 합니다. 그래서 console.log(입력값) 이게 먼저 실행되어서 저렇게 나오는 것일 뿐이다. 그냥 실행 순서만 좀 다를 뿐 state변경은 어쨌든 잘 된다.

 

주특기 2일차를 보내며 리액트는 자바스크립트랑 또 다른 세계같다고 느꼈다 ㅋㅋㅋㅋ 비슷하면서도 다르고ㅠ 리액트를 할 때 만큼은 리액트 뇌로 정신개조를 해야겠다. 그리고 과거에 대강 들었던 니꼴라스 강의가 새록새록 생각난다. 니꼴라스 강의가 사실 되게 딥하면서 친절하게 원리를 잘 설명해준 것 같다. 코딩 애플 다 들으면 니꼴라스 무료강의 1회독 다시 하고 그 담에 심화 강의 빨리 듣고 싶다 ㅋㅋㅋㅋㅋ 빨리 리액트 천재가 되고 싶다!!!