[Develop] 23.07.04 개발 공부 일지

요약: 노마드코더 영화 웹페이지 강의

일시: 23.07.04 09:30 ~ 18:20

장소: 더휴먼컴퓨터아트아카데미

배운 점:

• React
  • JSX
    • JSX(JavaScript XML) JavaScript에 XML을 추가 확장한 문법으로서, 자바스크립트 문법과 HTML을 동시에 작성할 수 있다.
    • 특징 1) 하나의 DOM 트리 구조를 이루기 위해 반드시 부모 요소 하나가 감싸는 형태여야 한다.
    • 특징 2) 중괄호({})를 통해 자바스크립트 표현식을 사용할 수 있다.
    • 특징 3) if문 대신 삼항 연산자를 사용한다. 
    • 특징 4) HTML 속성 이름을 카멜 표기법으로 작성한다. 
    • 특징 5) {/*.....*/} 와 같은 형식으로 주석을 사용한다.
  • state
    • 컴포넌트에 대한 데이터 또는 정보를 포함하는 데 쓰이는 리액트 내장 객체
    • 컴포넌트가 변경될 때마다 리렌더링된다.
    • 사용자의 작업 또는 이벤트가 발생함에 따라 응답한다.
    • 생성자에서 초기화된다.
    • setState() 통해 state 객체 값이 저장된다.
  • Props
    • 프로퍼티, props(Properties의 줄임말)
    • 상위 컴포넌트가 하위 컴포넌트에 값을 전달하기 위해 사용
    • 수정할 수 없다는 특징을 가지고 있음
  • babel
    • JSX 코드는 브라우저에서 바로 실행할 수 없기 때문에 순수 자바스크립트 코드로의 변환이 필요함
    • 이때 사용하는 것이 babel
  • React.memo
    • React는 먼저 컴포넌트를 랜더링한 뒤, 이전 결과와 비교하여 DOM을 업데이트한다. 
    • 하지만 컴포넌트가 React.memo() 와 래핑되면, 랜더링 결과를 Momoizing하고 다음 렌더링이 일어날 때 props가 같다면 Momoizing된 내용을 재사용하여 성능상의 이점을 가진다.
  • Create React App
    
    • React를 개발할 때, 초기 환경을 미리 구축하여 개발자로 하여금 바로 리액트 개발을 할 수 있게 셋업을 완료해놓은 틀
• 배열 변수 지정 방법

const food = ['tomato', 'potato']
const ['myFavFood', 'mySecondFavFood'] = food

 

 

부족한 점:

• 리액트에 대한 전체적인 이해도가 부족
• 여러 강의를 반복 수강하여 익숙해질 필요가 있음

 

 

 

출처

https://goddaehee.tistory.com/296

https://onlyfor-me-blog.tistory.com/463

https://www.daleseo.com/react-jsx/

https://ui.toast.com/weekly-pick/ko_20190731