24.07.02~24.07.09
리액트
HTML과 React의 Markup 다른점
HTML과 React의 Markup 다른점
최상위 엘리먼트의 구조
HTML: HTML 문서는 보통 하나의 최상위 엘리먼트로 구성된다. 예를 들어, 에서 시작해서 로 내려가는 구조.
React: React에서는 여러 개의 독립적인 엘리먼트가 동등하게 존재. React 컴포넌트는 자체적으로 완전한 구조를 가질 수 있으며, 특정 루트 엘리먼트가 필요하지 않음. 그러나 React에서 여러 컴포넌트를 렌더링할 때, 최상위에는 하나의 엘리먼트로 감싸줘야 하는 경우가 있습니다. 이를 보통 div나 Fragment등으로 감싸주게 된다.
태그의 독립성
HTML: HTML에서는 각 태그가 정해진 트리 구조에 따라 배치됩니다. 다시 말해, 부모-자식 관계가 명확하게 정의되어 있습니다.
React: React에서는 각 컴포넌트가 독립적으로 존재하며, 재사용 가능합니다. 이는 컴포넌트 기반의 접근 방식을 따르기 때문에 가능합니다.
HTML태그가 모두 다 소문자이다. 구분하기 위해서.
위 형식으로 정리해서 만들수 있다.사용자의 특정한 html 부분을 함수화하고 html 마크업 태그하는것과 똑같다.
강사님의 한마디: React는 원리가 있는것도 아니고 그냥 이렇게 생긴애다.html을 이렇게 다루면 훨씬 편리하겠는데? 하고 만들어진 언어이다.우리에겐 선택지가 없다. 프론트세상에선 다 React을 사용하기 때문에 리액트 모르면 취직이 어렵다.
처음 리액트를 접할때 어려운 점= 상당부분이 쪼개져있어서 익숙함의 문제일수가 있다.
리액트 한줄요약:
함수를 컴포넌트로 작성 대문자를 넣고 props로 데이터를 받는다.
자스가 들어갈땐 {}를 널어준다.
GPT한테 물어본 리액트가 뭐야?
리액트(React)는 Facebook에서 개발한 자바스크립트 라이브러리로, 사용자 인터페이스를 구축하기 위해 사용.
리액트는 컴포넌트 기반 아키텍처를 사용하여 UI를 작은 독립적인 부분으로 나누고, 이를 조합하여 복잡한 UI를 구성할 수 있습니다. 데이터가 변경될 때마다 UI가 자동으로 업데이트되도록 설계되어 있어, 상호작용이 많은 동적 웹 애플리케이션을 쉽게 구현 가능.
리액트는 가상 DOM(Virtual DOM)을 사용하여 성능을 최적화하고, 단일 페이지 애플리케이션(SPA)의 개발을 용이하게 한다. 또한, 다양한 추가 기능을 제공하는 생태계와 방대한 커뮤니티를 갖추고 있어, 개발 생산성을 높이는 데 매우 유용한 도구.
eventListenr를 대신해 onClick을 사용할수있다.
https://reactrouter.com/en/main
👆️ 공유해주신 링크
- 훅
- useState
리액트 세계에서 대문자는 컴포넌트 소문자로 시작하면 함수
https://velog.io/@dosira686/React-Virtual-DOM
리액트는 css를 사용할때 class가 아닌 className을 적는다
CSS in js
https://styled-components.com/
👆️스타일 컴포넌트 링크
적용순서
-
import를 한다
-
컴포넌트 생성
-
생성한 컴포넌트를 넣어준다
js처럼 어떨땐 이렇게주는 형식으로 if문도 적용할수있다.
https://tailwindcss.com/
👆️현재 트렌드인 리액트 css컴포넌트 사이트 링크
강사님 한마디: 개발자는 수치화해서 말하고 글적는 습관이 좋다. 무슨 언어문법을 배웠습니다 이것보단 무슨 문법 6개중에 몇개인 80%를 했습니다 라고 적는게 좋음
타입스크립트
-
타입스크립트는 자바스크립트가 아니다.
-
자바스크립트의 특징은 값을 지정하지 않는다.
-
A라는 변수를 만들때 문자열을 넣을수도 있고 숫자를 넣을수도 있다. 자유로움이 있어 사용하기 편리하다
-
단점은 값을 잘못넣을수가 있다. (숫자만 넣어야하는데 문자로 작성이 되어도 작동이 가능하니까)
기본적인 문법
타입스크립트는 타입추론을 지원한다.
매번 이런식으로 작성하는게 힘드니까
<Footer message={x}></Footer>
이런식으로 하면 좋다하심
-
문법은 약간 다르지만 비슷한데 interface라는 애도 있다.
- 다른점: 이름정의(IFooterProps), = 기호가 없다
-
type을 쓰던 interface를 쓰던 동작은 80% 똑같다. 미묘한 차이가 있다. 회사마다 쓰는 정의가 다름.
면접때 나오는 질문: type을 쓰는가 interface를 쓰는가? 정답은 없다. 둘 다 사용해도 되기때문에. 문법을 물어보기보단 개념적, 철학적인, 사상 생각을 보기위해 질문하는 것.
-
중복된 코드 하나로 없애기. 프로그래밍에서 중복은 나쁜거다.
-
꼭 타입유형이 객체일 필요는 없다.
이런식으로 변경해주면 복잡한것도 간단하게 바꿔준다.
강사님 한마디: 어떤건지 잘 모를때 사용하는 any도 있음. 처음 사용하는 사람들의 호환성을 위해 만들어진 문법. 자바스크립트 같은 코드. any가 얼만큼 있느냐가 얼마나 타입스크립트에 익숙하냐 안익숙하냐를 알수있다. any를 최대한 쓰면 안됨.
