TIL18: React 기초

Section 1의 마지막 과정 React에 들어갔습니다.

프로그래밍 경험 있으신 분들이 대부분 고차함수랑 React부분 어렵다고 하셨는데, 정말 React는 어려웠어요...

익숙해지면 오히려 HTML CSS DOM 따로 사용하는 것보다 훨씬 편할 것 같은데 아직은 손에 안익네요ㅠㅠㅠ

복습 마저 열심히 해야할 것 같습니다!

 

리엑트 (React)

React는 프론트앤드 개발을 위한 JavaScript 오픈소스 라이브러리입니다.

크게 3가지 특징이 있습니다.

1. 선언형: JSX를 활용해서 선언형 프로그래밍을 지향합니다. HTML CSS JS로 나눠 적는 것과 달리 하나의 파일에 명시적으로 작성할 수 있는 장점이 있습니다.

2. 컴포넌트 기반: 컴포넌트로 분리하면 서로 독립적이고 재사용 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있습니다.

3. 범용성: React는 JavaScript 프로젝트 어디에든 유연적으로 적용할 수 있습니다.

 

그럼 '1. 선언형'에서 언급한 JSX는 무엇일까요?

JSX는 JavaScript XML의 줄임말로 React에서 UI를 구성할 때 사용하는 문법입니다. 

JavaScript를 확장한 문법를 사용함으로써 코드의 복잡성을 줄이고, Element를 이해하기 쉽게 만들 수 있습니다.

Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일합니다.

컴파일 후, JavaScript를 브라우저가 읽고 화면에 렌더링할 수 있습니다

 

'2. 컴포넌트 기반'에서의 컴포넌트는 무엇일까요?

구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋을 말합니다. 

각자 다른 기능을 갖고 있기 때문에 이러한 컴포넌트를 한 곳에 모아 복잡한 UI도 쉽게 구성할 수 있다고 합니다!

 

이번에는 JSX를 어떻게 활용할 수 있는지에 대해 알아보도록 하겠습니다.

HTML이나 CSS와의 차이점을 위주로 공부하면 좋을 것 같습니다!

1. 하나의 엘리먼트 안에 모든 엘리먼트를 포함시켜줘야 합니다.

그래서 <div></div>로 내용을 분리해줬다고 다 끝난 것이 아니라 그 엘리먼트들을 모두 묶어주어야 합니다.

2. 엘리먼트에 class 사용시 className을 사용해야 합니다.

또한 주의할 점이 디자인 부서와 잘 협업할 수 있도록 className을 잘 지어줘야 한다고 합니다!

3. JavaScript 표현식을 사용해줄 때 중괄호를 이용해서 텍스트와 구분해줍니다.

4. 사용자가 정의하는 컴포넌트 이름은 대문자로 시작해야 합니다.

5. 조건부 렌더링에는 삼항연산자 사용을 추천합니다. 

6. 여러 개의 엘리먼트를 표시할 때, map 함수를 이용한다고 합니다. 

 

 

 

새로 배운 내용

구조분해할당?

'분해(destructuring)'는 '파괴(destructive)'를 의미하지 않습니다.

구조 분해 할당이란 명칭은 어떤 것을 복사한 이후에 변수로 '분해(destructurize)'해준다는 의미 때문에 붙여졌습니다.

 

props와 states는 데이터를 가져올 수 있는 기능 있음. 

동적인지 정적인지에 따라 사용 달라짐.

props는 부모 컴포넌트에서 가져오기 위해 사용

 

디너클럽

커리어스킬, 완벽한 공부법 이라는 책 알아보기

번아웃 이겨내기

블로그 매우 중요

일단 하다보면 좋아하는 일들이 생김