📚TIL

day41

React

• View만 관리하는 라이브러리로 다른 부분은 책임지지 않음
• react는 컴포넌트의 조합으로 View를 구성하기 때문에 컴포넌트는 react의 가장 중요한 요소
• 가상돔을 사용하여 필요한 부분만 한번에 렌더링하기 때문에 최적화 없이 빠른 성능을 낼 수 있음

JSX

• class -> className : class가 이미 JS내에서 예약어기 때문에 class 이름을 지정할 때 className 사용
• 반드시 최상위 요소는 하나여야 함
• 최상위 요소가 여러개야 할 경우 다른 요소로 감싸거나 fregment로 감싸기

조건문 & 반복문

• 조건문

const str = "Hello React"
const showLink = false

{showLink && (	//showLink가 true일 경우 출력
  <a
     classList = "App-link"
     href = "https://reactjs.org"
     >	Learn {str}  </a>
)}

• 삼항연산자

const showLogo = "show"

{showLogo === "show" ? 
  <img src="./logo.svg" alt="logo">
  :	<h1>React</h1>
}

• 반복문

const libraries = ['React', 'Vue', 'Angular']

<ul>
  {
    libraries.map(library => (
      <li key={library}>{library}</li>
    ))
  }
</ul>

컴포넌트

• react 컴포넌트에 html, style, javascript를 담을 수 있음
• event, state(상태)를 가질 수 있음
• 데이터는 상위에서 아래로 흐르는 단방향 데이터
• 많은 컴포넌트들이 모여서 App을 만듦
• 재사용 가능한 컴포넌트를 만들기 위해서 UI를 추상적으로 바라보기
• 컴포넌트 분류 : 도메인/ 역할/ 크기

🎨2021. 10. 12

오늘 드디어 리액트 첫 강의를 들었다! 뷰보다 리액트가 어렵다는 얘기를 많이 들었는데 처음 봤을 때 JS파일에 있는 html 구조인 JSX를 보고 뷰랑 비슷하다는 생각이 들었다. 컴포넌트를 짤 때 보통 도메인에 따라서 분류했는데 그 외의 방식들이 있다는 사실을 알게 되었다. 앞으로 컴포넌트를 짤 때 잘 적용해보면 좋을 것 같다. 아직 기초에 기초만 배워서 정확하게 파악하지 못했는데 얼른 강의를 듣고 공부해봐야겠다.
내일은 정말 리엑트 강의에 모든 시간을 사용해야겠다!