[Seeds-study] (React/리액트) 2주차 JSX와 컴포넌트 기초

[STUDY 진행 과정은 깃허브에 계속 commit 하고 있습니다] (많관부!)
https://github.com/just-stopyoon/Seeds-study

2주차 과제 내용

App.js에 JSX와 Component를 사용해서 개인페이지 UI 작성하기

JSX (JavaScript XML)에 대하여

JSX란?

JavaScript를 학장한 문법으로, UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장

JSX는 React "element"를 생성한다!

React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신,
둘 다 포함하는 "컴포넌트"라고 부르는 누슨하게 연결된 유닛으로 관심사를 분리한다.
React는 JSX 사용이 필수는 아니지만, 대부분 JavaScript 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각한다.

- "https://ko.legacy.reactjs.org/docs/introducing-jsx.html" React 공식 문서

특징 1

JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있다.

const name = 'stopyoon';
const element = <h1>Hello, {name}</h1>;

name 이라는 변수를 선언한 후, 중괄호로 감싸 JSX 안에서 사용할 수 있다.

특징 2

JSX도 표현식이다.

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

컴파일이 끝나면, JSX 표현식이 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식된다.

따라서, JSX를 if 구문 및 for 루프 안에 사용하고, 변수를 할당하고, 인자로서 받아들이고, 함수로서 반환할 수 있다.

JSX 속성 정의 방법

1. "" 따옴표를 이용해 문자열 정의

const element = <a href="https://www.reactjs.org"> link </a>;

2. { } 중괄호를 이용해 표현식 삽입

const element = <img src={user.avatarUrl}></img>;

* 주의사항 : 표현식을 삽입할 때 { } (중괄호) + ""(따옴표) 를 사용하면 안된다. 둘 중 하나만 사용할 것!

JSX로 자식 정의

1. 태그가 비어있다면 XML 처럼 /> 를 이용해 바로 닫아주어야 한다.

const element = <img src={user.avatarUrl} />;

태그는 자식을 포함할 수 있다.

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

JSX는 주입 공격을 방지한다

주입 공격이란?

주입 공격이란 보안 취약점 중 하나로, 사용자의 입력이 잘못된 방식으로 처리되어 악의적인 코드가 실행되는 상황

JSX는 어떻게 방지하는가?

JSX는 입력된 값을 문자열로 취급하는 것이 아니라, JavaScript 객체로 취급하기 때문이다!

기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 Escape 하므로,

어플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않는다.

모든 항목은 렌더링 되기 전에 문자열로 변환된다.

정리하자면,

JSX는 입력된 값을 JavaScript 객체로 취급하며, 렌더링되기 전에 이스케이프 하여 XSS 공격을 방지한다.

따라서, JSX에 사용자 입력을 삽입하는 것은 안전하다.

const title = response.potentiallyMaliciousInput;
// 이것은 안전합니다.
const element = <h1>{title}</h1>;

JSX는 객체를 표현한다

Babel은 JSX를 React.createElement() 호출로 컴파일한다.

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

다음 두 코드는 동일하다!

React.createElement()는 버그가 없는 코드를 작성하는 데 도움이 되도록 몇 가지 검사를 수행한다.

React Element란?

// 주의: 다음 구조는 단순화되었습니다
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

"화면에서 보고 싶은 것을 나타내는 표현" 하는 것이라고 생각하면 된다.

JSX 기본 문법 (정리)

1. JSX에서는 HTML 태그에서 사용하는 대로 class="" 를 사용하지 않고 className 을 사용한다.

function App(){
  return (
    <div className="App">
      <header>
        <h1>로고</h1>
      </header>
    </div>
  )
}

2. JSX내에서는 중괄호를 사용해 변수를 html 태그 안에 넣을 수 있다.

const name = "stopyoon";
const el = <p>안녕하세요, {name}!</p>;

3. HTML 태그에 데이터 바인딩을 할 수 있다.

function App(){
	const logoImg = "https://example.com/image.jpg";
	const headerLogo = <img src={ logoImg } alt="로고" />;
	
  return (
    <div className="App">
      <header>
        <h1>{ headerLogo }</h1>
      </header>
    </div>
  )
}

* 데이터 바인딩이란?

두 개의 데이터 소스(또는 동일한 데이터에 대한 두 개의 개별 표현)를 함께 연결하고
동기화 상태를 유지하는 일반적인 기술

중요한 데이터를 저장할 때는?

State 사용

App.js 에 useState를 import 하고 원하는 곳에서 useState('데이터')를 사용하면 데이터를 state에 잠깐 저장할 수 있다.

function App(){
	const logoImg = "https://example.com/image.jpg";
	const headerLogo = <img src={ logoImg } alt="로고" />;

	let [날짜,날짜변경] = useState('2024-04-01');
	
  return (
    <div className="App">
      <header>
        <h1>{ headerLogo }</h1>
      </header>
	    <div className="main-container">
				<div className="postt">
					<h4>게시글 제목</h4>
					<p>{ 날짜 }</p>
				</div>
			</div>
    </div>
  )
}

state 는 변경사항이 생기면 state를 사용하는 html을 자동으로 재렌더링 해준다.

자주 바뀌는 데이터를 저장해두고 바인딩 하는 게 좋다.

State 변경하기

let [날짜,날짜변경] = useState('2024-04-01');
날짜변경('2024-03-04');

여기서 '날짜변경'은 state 변경 시 사용되는 함수라고 생각하면 된다!

2번쨰 줄처럼 state를 변경할 수 있다.

Component

react 에서는 html을 한 단어로 치환해서 사용할 수 있는데, 이걸 component 라고 한다.

component 종류에는 '함수형' 과 '클래스형' 이 있다!

function App (){
  return (
    <div>
	<Header></Header>
    </div>
  )
}
function Header(){
  return (
    <div>
      <h1>여기 로고 들어가요</h1>
    </div>
  )
}

1. function을 이용해서 함수를 하나 만들고 작명

2. 그 함수의 return () 안에 축약을 원하는 HTML 담기

3. 사용하고 싶은 곳에 <함수명/> 을 사용하면 HTML이 들어온다

2주차 과제

App.js에 JSX와 Component를 사용해서 개인페이지 UI를 간단하게 작성해보기

[조건]

App.css에 스타일 작성하기
UI의 구조는 <header>,<section>,<footer>가 들어갈것
section에는 게시물같은게 들어간다고 가정하고
여기에 들어가는 데이터를 state를 사용하고 바인딩해보기
헤더,섹션,푸터는 component를 사용해서 재사용 가능하게 만들기

일단 header, section, footer를 함수형 컴포넌트로 선언해줬다 + 그리고 내용 추가 하기

1. header

function Header() {
  return (
    <div className="header">
      <p className="title-text">
        <img className="img-size" src={iconImage} alt="icon" />
        Seeds-study🌱 2주차
      </p>
      <p className="sub-text">JSX 컴포넌트와 기초 문법</p>
    </div>
  );
}

2. section

function Section() {
  const [posts] = useState([
    {
      id: 1,
      title: "제목 : seeds 2주차 과제",
      content: "JSX 컴포넌트와 기초 문법에 대해 ARABOZA",
    },
  ]);
  return (
    <div className = "set-middle">
      <p className = "post-box-title">Section 게시판</p>
      <div className = "square">
        <ul className = "post-box">
          {posts.map((post) => (
            <li key={post.id}>
              <p className = "post-title">{post.title}</p>
              <p className = "post-content">{post.content}</p>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

게시글 같은 것이 들어간다고 생각하니 사각형 상자가 있으면 좋을 것 같아 <div>로 하나 추가했다.

그 다음 useState를 사용해서 posts 변수에 게시글에 필요한 기본 정보, id, title, content를 만들었다.

번외) map 사용하기

게시물 형식이라면, 일일히 posts 배열에 접근하기 보다는 새로운 배열을 만들기 위해서 map을 사용했다.

map이란?

JavaScript 배열에서 사용되는 method 중 하나로, 배열 내의 모든 요소에 대해 주어진 함수를 호출하고, 그 결과로 새로운 배열을 만든다.

map은 기존 배열을 변경하지 않고도 각 요소에 대해 원하는 작업을 수행할 수 있다는 장점이 있다!

따라서, 배열의 모든 요소에 대해 동일한 작업을 수행하기 때문에 반복문을 사용하는 것보다 코드를 더 간결하게 작성할 수 있다.

따라서, 다시 내 코드로 돌아가면!

map 함수를 사용하여 'posts' 배열을 순회하고, 각 posts에 대한 JSX를 생성한다.

3. footer

function Footer() {
  return (
    <div className = "footer-bg">
      <footer className="footer-font">©stopyoon</footer>
    </div>
  );
}

이렇게 각각 header, section, footer를 생성해주고 마지막에는 컴포넌트를 사용해서 묶어주기!

function App() {
  return (
    <div className="App-back">
      <Header />
      <Section />
      <Footer />
    </div>
  );
}

확실히 코드가 훨씬 간결해보이는 것 같다.

이미 코드에는 CSS가 적용되어있지만 CSS도 슥슥 짜주면, 과제 완료!

과제 완료!

저작자표시 (새창열림)

'Front-end > React 리액트' 카테고리의 다른 글

[Seeds-study] (React/리액트) 5주차 React Hooks (useState) (1)	2024.03.24
[Seeds-study] (React/리액트) 4주차 이벤트 처리와 폼 (1)	2024.03.18
[Seeds-study] (React/리액트) 3주차 컴포넌트에 prop전달 / 조건부 렌더링 (0)	2024.03.10
[Seeds-study] (React/리액트) 1주차 React 개발 환경 설정 (2)	2024.02.25
[React 리액트/CSS] CSS가 제대로 적용되지 않을 때 해결법 (2)	2024.02.20

2주차 과제 내용

JSX (JavaScript XML)에 대하여

JSX란?

특징 1

특징 2

JSX 속성 정의 방법

JSX로 자식 정의

JSX는 주입 공격을 방지한다

JSX는 객체를 표현한다

React Element란?

JSX 기본 문법 (정리)

중요한 데이터를 저장할 때는?

State 변경하기

Component

2주차 과제

번외) map 사용하기

'Front-end > React 리액트' 카테고리의 다른 글

티스토리툴바