[💻 코드스테이츠 FE 44기] React Intro

✔️ 시작

React란 무엇이고 왜 사용하고 장점이 무엇인지, 사용시 주의점 등에 대해 학습했다.

---

📍알게 된 것

✔️ React

• 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이고 유연한 Javascript 라이브러리
• React로 web app을 만든다.
• DOM과 달리 CSS, JSX문법만 가지고 웹 애플리케이션을 개발 할 수 있다.

  Javascript만으로 마크업 형태의 코드를 작성해 DOM에 배치할 수 있다.
  Javascript문법 + HTML 문법 동시에 사용

const MyInfo = () = {
	return (
    <div>{변수명}</div>
  )
}

const App = () => {
	return(
    	<MyInfo />
    )
}

export { App }

Web APP

• 새로고침 없이 진행된다.
• 모바일 앱으로 발행하기 쉽다.
• 앱처럼 뛰어난 UX
• 로딩 속도가 없기 때문에 비즈니스적 강점이 있다.

✔️ React 특징

1. 선언형(Declarative)
2. 컴포넌트 기반(component-Based)
3. 범용성(다양한 곳에서 활용)

1. 선언형(Declarative)

• 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다.

2. 컴포넌트 기반(Component-Based)

• 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발
• 컴포넌트를 분리할 경우 : 서로 독립적이고 재사용이 가능하다.

  독립성, 재사용성 >> 유지보수 집중 개발에 용이

3. 범용성(Learn Once, Write Anywhere)

• Javascript 프로젝트 어디에든 유연하게 적용될 수 있다.
• Facebook에서 관리되어 안정적이고 유명하다.
• 리엑트 네이티브로 모바일 개발도 가능하다.

  리엑트는 기존 프로젝트에도 유연하게 사용할 수 있다.

✔️ JSX

• HTML, JS가 결합한 문법으로 명시적으로 코드를 작성해 직관적으로 코드를 작성할 수 있다.
• 다른 기술을 한 곳에 모아 둘 수 있다.
• JSX는 HTML이 아니다.
• JSX를 애용해 React 엘리먼트를 만들 수 있다.

  브라우저가 이해할 수 있는 Javascript 코드가 아니기에 변환해 줘야한다. >> 'Babel'을 사용해준다.

Babel

• JSX를 Javascript로 컴파일 한다.

  컴파일 후 Javascript를 브라우저가 읽고 화면에 렌더링 할 수 있다.

✔️ JSX 규칙

1.하나의 엘리먼트안에 모든 엘리먼트가 묶여 있어야 한다.

• 여러 엘리먼트를 작성할 경우 최상위에서 opening tag, closing tag로 감싸줘야 한다.

<div> //opening tag
  <div></div>
  <div></div>
</div> //closing tag

2. 엘리먼트 클래스 사용시 className으로 표기

• CSS class 속성을 추가할 경우 className으로 표기해야한다.

  <div className=''></div>

class로 작성시 Javascript class로 받아들인다.

3. Javascript 표현식 사용시 중괄호{} 사용

• Javascript사용시 { }을 사용한다.

function App(){
	const name = "JiEun";
    return(
    	<div>Hello, {name}</div>
    )
}

{} 사용 안하면 일반 텍스트로 인식

4. 사용자 정의 컴포넌트는 대문자로 시작한다.(PascalCase)

• React 엘리먼트 JSX로 작성되면 HTML 엘리먼트와 구분 되도록 대문자로 시작해야한다.

• 사용자 컴포넌트 : 대문자로 작성됨 JSX 컴포넌트

function Hello(){
	return <div>...</div>
}

function HelloWorld(){
	return <Hello />
}

5. 여러 HTML 표시할 경우 map()함수 이용

• map() 사용시 반드시 key JSX속성 넣어줘야한다.
• key 속성 : map() 내부의 첫번째 엘리먼트에 추가한다. (데이터가 제공하는 id를 할당)

const content = dummyData.map((data) => {
	<div key={data.id}>
    	<h3>{dada.tit}</h3>
    </div>
})

map 사용시 key 추가

컴포넌트

• 구조와 동작에 대한 코드를 한 뭉치로 적을 코드셋 (구조, 동작)

function App(){
	const user = {..., ...}
    
    function userName(user){
      return 실행 코드
    }
  	
  	return(
    	<div>
      		<h1>Hello {userName(user)}</h1>
      	</div>
    )
}

• 웹 애플리케이션의 구조와 동작을 한 눈에 파악, 구조를 바라볼 수 있도록 돕는다.

• UI 구성하는 필수 요소

  JSX없이 Reat요소를 만들 수 있지만 코드가 복잡해 지고 가독성이 떨어진다.

• 리엑트 애플리케이션은 컴포넌트들의 관계를 트리구조로 형상화해 표현할 수 있다.

• 계층적 구조를 트리구조로 형상화

• 애플리케이션은 최소 한개의 컴포넌트를 갖는다.

• 각각의 컴포넌트는 각자 고유의 기능을 가지고 UI의 한 부분을 담당한다.

SPA

• 싱플 페이지 어플리케이션

create React APP

• 리엑트 SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴체인

npx create-react-app 폴더명
npx create-react-app@lastest 폴더명

---

✏️ 마치며

프론트엔드의 꽃이라고 말할 수 있을 정도로 유명한
React로 들어갔다.

처음 접했을 땐 HTML + Javascript가 합쳐진 모습 같고
저장 하자마자 새로고침 되는 점에서 좋았다.

React의 장정은 재사용이 가능하고 직관적인 점이 아닐까 싶다.
아직은 첫 단계로 간단할 수 있지만 재밌다.

이전 학습은 이론이 많았다면 이번 학습은 실습 위주가 많은거 같다.

Javascript 기초가 확실히 중요하다 생각해
Javascript에 대한 공부도 놓치지 않도 틈틈이 공부해야 겠다.