# 211008 TIL

장기현장실습

리액트 학습하기

• 웹 게임을 만들며 배우는 React (12/64) 
• 띵동 이슈를 해결하기 위해, 부족한 개념을 학습하고 정리함 
  • 리액트로 컴포넌트를 어떻게 만들지 선언해줄 수 있다. 리액트 돔은 리액트 코드를 브라우저에 붙여주는, 화면에 실제로 반영해주는 역할을 한다. 렌더링을 통해 돔에 컴포넌트를 그려서 보내준다.
  • 리액트의 렌더부분에서 자바스크립트 대신 HTML 문법을 쓰는데, 그 코드를 원래 인식할 수 없다. 그런데 이 부분을 바벨이 인식할 수 있도록 도와준다. 바벨이 JSX (JS + XML) 문법을 원래의 자바 문법으로 바꿔줘서 인식할 수 있게 된다.
  • 리액트에서는 바뀌는 부분은 state로 등록 해야하는데, 등록할 때는 상태의 초기값을 넣어주면 된다.
  • input에서 onChange에 e.target.value → 실제로 직접 입력하는 값 
  • 전체 코드를 div로 감싸줘야 하는데, <> 빈 태그로 하면 쓸데 없이 div를 또 쓰지 않아도 된다.
  • state 사용해서 구구단 만들어보기 
    • 
      

      8 곱하기 9 는?
      인풋 입력버튼
      결과: 72 정답

  • 이전 값으로 새로운 state를 만들 때는 setState() 함수안에 객체 대신 화살표 함수를 써주자. setState() 함수가 비동기 함수여서 문제가 발생할 수 있다. 
  • 그리고 setState() 할 때마다 render() 함수가 실행된다. 그럼 state값이 바뀔 때마다 render() 함수가 실행되어 낭비가 될 수 있다. 그리고 render() 함수 안에다가 예를 들어 onChange 함수를 선언해두었다면 render() 함수가 실행될 때 마다 onChange 함수가 새로 선언되는 것이다. 그렇기 때문에 render() 함수 밖에 따로 선언해두는 것이 중요하다. 
  • 돔에 직접 접근하고 싶을 때는 ref={화살표 함수}라는 것을 사용한다. 
  • 리액트 개발하는 사람들이 클래스형 컴포넌트에서 쓰던 setState() 이런거를 함수형 컴포넌트에서 사용할 수 있도록 Hooks를 만들어주었다. 보통 use로 시작하는게 Hooks이다 
  • 함수형 컴포넌트에서는 state 값이 바뀔 때마다 모든 로직이 처음부터 다시 선언?실행? 되어 클래스형 컴포넌트보다 조금 느리다는게 단점이다. 그래서 나중에 이런 부분은 최적화를 통해 굳이 다시 실행되지 않아도 되는 로직을 수정해주는 것이 필요하다 

 

프론트엔드 개발환경 학습하기

프론트엔드 개발환경의 이해와 실습 (12/39)

[인프런] 프론트엔드 개발환경의 이해와 실습 (플러그인)