[React] React란? + JSX 기초

👀 리액트란

리액트란 프론트엔드 개발을 위한 javaScript 오픈소스 라이브러리이다.

구 페이스북 현 메타(구 양배추 현 조세후 느낌 ㅋㅋㅋ)에서 만들어서 안정적이고, 많은 사람들이 이용해서 자료도 풍부하다.

---

📌 리액트의 3가지 특징

• 선언형
• 컴포넌트 기반
• 범용성

-선언형(declarative)

한 페이지를 만들기 위해 따로따로 html/css/js로 나누지 않고 하나의 파일에 명시적으로 작성할 수 있게

jsx 파일 형식으로 선언형 프로그래밍을 지향한다.

하나의 js파일에 js,html이 묶여있어 파악하기가 쉽다.

 

-컴포넌트 기반(componenet-based)

컴포넌트란 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 것을 말한다.

구조와 동작에 대한 코드를 한 뭉치로 적은 코드 세트라고 말할 수도 있다.

컴포넌트는 분리되면서 서로 독립적이고 재사용 가능하다는 특징이 있어, 기능 자체에 집중에 개발할 수 있다.

또 유지보수나 유닛테스트에 좋다.

 

-범용성(learn once, write anywhere)

리액트는 javaScript를 사용하는 프로젝트에 어디든 적용 가능하다.(참고로 앵귤러 프레임워크는 해당 생태계에 종속)

안정적이고 유명하며, 리액트 네이티브로 모바일 개발도 가능하다.

 

---

🫢JSX

 

JSX란 react에서 ui를 구성할 때 사용하는 문법으로, javaScript를 확장한 문법이다.

 

html처럼 하나의 문법이자, 파일 확장자명으로도 쓸 수도 있다.

(js확장자 파일에 jsx문법을 써도 문제는 없다.

다만 react컴포넌트임을 확장자에서부터 뽝! 나타내주기 위해서 확장자명을 jsx로 바꾸기도 한다.)

이 jsx를 활용해 우리는 react엘리먼트를 만들 수 있다.

 

javaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 javaScript코드가 아니다.

때문에, 브라우저가 이해할 수 있는 javaScript코드로 변환해줘야한다.

이렇게 JSX를 브라우저가 이해할 수 있는 javaScript파일로 컴파일 해주는 것이 "Babel"

 

기존 웹 에플리케이션의 DOM이 html,css,javaScript 세가지 문법이 필요했다면,

React DOM은 css,jsx 문법만으로도 가능하다.

하지만 명심! jsx는 html처럼 생겼지만, html이 아니다. 때문에 Bable을 이용해 컴파일 해줘야한다.

 

---

💡JSX 주요 문법

 

⭐️ JSX에서 여러 엘리먼트를 작성하고자 하는 경우, 최상위에서 opening tag와 closing tag로 감싸주어야한다.

//---------❌---------

<div>
	<h1>Hello</h1>
</div>
<div>
	<h1>World</h1>
</div>



//---------⭕️---------
<div>
	<div>
		<h1>Hello</h1>
	</div>
	<div>
		<h1>World</h1>
	</div>
</div>

 

⭐️ 엘레먼트 클래스 사용시, class가 아닌 className으로 표기한다.

(class로 작성하면 html속성대신 자바스크립크 클래스로 받아들임!)

//---------❌---------

<div class="greeting">Hello!</div>



//---------⭕️---------

<div className="greeting">Hello!</div>

 

⭐️ JSX에서 javaScript를 쓰려면 꼭 중괄호 이용해야한다.

(중괄호 쓰지 않으면 일반 텍스트로 인식한다.)

function App(){
  const name = 'Josh Perez'
    
  return (
    <div>
      Hello, {name}
    </div>
  )
}

 

⭐️ React엘리먼트가 JSX로 작성되면 "대문자"로 시작해야한다.

소문자로 시작하면 일반 HTML 엘리먼트로 인식한다.

//---------❌---------

function hello(){
  return <div>Hello</div>
}
function HelloWorld(){
  return <hello/>
}


//---------⭕️---------

function Hello(){
  return <div>Hello</div>
}
//이렇게 대문자로 작성된 JSX컴포넌트를 따로 사용자 정의 컴포넌트라고 부른다.
function HelloWorld(){
  return <Hello/>
}

 

⭐️ 조건부 렌더링은 if문이 아닌 삼항연산자를 이용해야 한다.

<div>
  {
    (1+1 === 2) ? (<p>정답</p>) : (<p>탈락</p>)
  }
</div>

왜일까?

jsx에서 자바스크립트를 쓰고 싶으면 중괄호 안에 표현식이 들어가야하는 것이 규칙이다. 

표현식이란 연산후에 변수로 바로 할당 할수 있는것!

그렇지만 우리는 if문 자체를 변수로 할당하지 못한다.  따라서 if문은 표현식이 아니다.

 

 

⭐️ 여러 개의 HTML 엘리먼트를 표시할 때, map()함수를 이용한다.

🛑 추가++ map함수를 사용할 때 반드시 "key" JSX속성을 넣어야 한다. 

"key" JSX 속성을 넣지 않으면 콘솔에 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시된다.(없어도 작동이 되기는 한다.)

const posts = [
  {id:1, title: 'Hello World', content: 'Welcome to learning React'}
  {id:2, title: 'Installation', content: 'You can install React from npm'}
]

function Blog(){
  const content = posts.map((post) => 
  	<div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  
  return (
    <div>
      {content}
    </div>
  )

}

 

🛑 추가++ map함수를 사용할 때 반드시 "key" JSX속성을 넣어야 한다. 

"key" JSX 속성을 넣지 않으면 콘솔에 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시된다.(없어도 작동이 되기는 한다.)

 

리액트엔 가상 DOM이 존재한다. 

키값은 리랜더링을 불필요하게 하지 않기 위해 쓴다. 

리액트에서 키값으로 같은 엘레먼트인것으로 인식하고, 변화가 필요없을때 렌더링을 하지 않는데,

키를 가변적으로 넣게 되면, 나는 같은 엘레먼트를 만들고 싶었는데 리액트가 다른 엘레먼트로 인식하고 리랜더링을 한다.

관련 공홈 페이지

---

🫣관련글

state 쓰는 법

State and Props + 이벤트핸들링

---

😊코드스테이츠 부트캠프 프론트엔드 과정을 수강하며, 수업내용을 정리한 자료입니다.