React.js 사용하는 이유
그 전 개발을 하면서 맛만 봤던 거라 정확하게 이게 뭔지 어떨 때 써야하는지 몰랐다
프론트 수업을 들으면서 HTML, CSS 그리고 JavaScript 관련 수업을 듣고, 자연스럽게 다음 진도인 React 수업을 듣는데,
React 를 왜 쓰지 그냥 html 구조를 짜면 되는 거 아닌가 굳이 할 필요가 있나 했는데
결국 html 도 반복되는 구조가 있고 그러다 보면 코드가 길어지는데 이걸 React 가 해결해줄 수 있다
React 가 만든 DOM(가상의 돔)이라 불리고, React 작업할 때 기준을 잡아야 되기 때문에
html 에는 1~2개(미완성 html) 밖에 없다고 한다.element 가 동적으로 추가가 되면서 클라이언트 쪽에서 실행이 되는데
이때 렌더링이 된다 !
공식 문서를 확인해보면
선언형, 컴포넌트 기반이라고 하는데 그 부분은 아래에서 하고, 글로만 보면
- 컴포넌트 단위로 구성하여 조합, 분해 하기 쉽다.
- 가상 DOM 을 활용하기 때문에 화면이 자주 바뀌는 경우 렌더링 자원을 아낄 수 있다
등등 알 수 있다 !
하지만 React 의 단점은 코드 한 부분이라도 잘못되면 DOM 이 만들어지지 않으니 조심 !
React 란 ?
리액트는 페이스북(현재 Meta) 에서 만든 JavaScript 사용자 인터페이스 라이브러리
웹 개발이 복잡해지면서 html, css, js 만으로 한계가 생기면서
초기엔 Web 개발을 위한 프론트엔드 라이브러리로 DOM 조작을 쉽게 해주는 jQuery 라이브러리가 주로 사용이 됐는데,
이 또한 DOM 을 직접 조작하는 방식에 한계를 느껴 컴포넌트 기반 개발을 지원하는 리액트 라이브러리가 나온 것 !
리액트 컴포넌트 (Component)
간단하게 말하자면 HTML 태그를 반환하는 함수 라고 생각하면 된다
하지만 단순하게 HTML 뿐만 아니라 스타일링을 위한 css, 로직을 위한 javascript 코드를 포한 HTML 이다
사용하는 이유 중 가장 큰 이유는 재사용과 분리성이다
개발을 배우면서 많이 듣는 말이 중복된 코드는 피해라 인데 !
컴포넌트를 사용함으로써 불연속적인 코드를 중복성을 방지해준다.
또 다른 이유는 자바스크립트 영역도 쓸 수 있고, JSX 영역도 쓸 수 있어서 좋다
분리성은 코드 베이스를 작고 관리 가능한 단위로 유지할 수 있는데 즉 유지 보수가 쉽다는 뜻 !
JSX (JavaScript XML) 란 ?
const element = <h1>Hello, world!</h1>;
자바스크립트의 확장 문법으로 템플릿 언어가 떠오를 수도 있지만, 자바스크립트의 의 모든 기능이 포함 되어 있다.
브라우저에서 실행되기 전에 코드가 번들링()되는 과정에서 바벨을 사용하여 React element 를 생성되는데
이때 일반적인 자바스크립트 형태의 코드로 변환된다
쉽게 말하자면 ! 자바스크립트 내에 HTML 들어오고, 만들어 쓸 수도 있음 !
그린다, 표현한다라고 많이 말한다 !
JSX 문법
[React] JSX
: Javascript + XML
: Javascript 내 HTML 작성 가능
: () 내 작성
: HTML 태그 내 Javascript 작성하려면, {} 사용
: 작성된 HTML 을 < React element > 라고 함1. 감싸인 요소
아래 코드와 같이 한 줄인 경우에는 () 가 생략될 수 있지만,
// react element
// 한 줄인 경우 () 생략 가능
const h1 = <h1>안녕 리액트</h1>
아래 코드처럼 element 가 여러 개인 경우 반드시 부모 요소 하나로 감싸야 한다.
Virtual DOM 에서 효율적으로 비교할 수 있도록 내부에서 하나의 DOM 트리 구조로 이루어져야 한다.
const h1 = (
<div>
<h1>안녕</h1>
<h2>리액트</h2>
</div>
);
2. 자바스크립트 표현
JSX 문법은 DOM 요소를 렌더링하는 기능외에 JSX 안에 자바스크립트 표현식을 사용할 수 있다 !
자바스크립트 표현식을 작성하려면 {} 로 감싸야한다 !
function Greeting({title, description}) {
// JS 영역
// 매개변수가 2개 이상의 값을 받으면 객체 형태로 받게 됨
console.log('title >> ', title)
console.log('title type>> ', typeof title)
// JSX 영역
return (
<div>
<h1>{title}</h1>
<h2>{description}</h2>
</div>
);
}3. class 대신 className
만약 태그에 class 정의를 할 때 class 로 표현했다면 콘솔창에는 property `class`. Did you mean `className`? 라고 경고창이 뜰거다 !
그 이유는 class 가 자바스크립트의 예약어이기 때문에 리액트에서는 class 를 정의할 때 className 을 사용해야한다 !
const mainCard = (
<div className="main-card">
<img src="img/food-one.jpg" alt="올리브 오일" width="400"/>
<button>🤍</button>
</div>
);4. 꼭 닫아야 하는 태그
html 코드를 작성할 때 input 이나 img 등 닫지 않아도 되는 태그들이 있는데,
그럴 땐 <태그명 /> 처럼 닫아주면 된다
const foodItem = (
<li>
<img src="img/food-two.jpg" alt="핫케이크" />
</li>
);
근데 만약에 태그 사이에 content 가 없으면 self-closing-tag 라 불린다.
태그를 선언하면서 동시에 닫을 수 있는 태그 !
5. 주석
일반 자바스크립트에서 사용하는 주석과 작성할 떄 조금 다른데 아래 코드 참고 !
const app = (
// 한 줄 주석
/* 여러 줄 주석 */
<div>
// 주석이 아닌 content
{
// Javascript 코드 작성 가능 영역
/* 여러 줄 주석, 시작과 끝이 분명해서 여러 줄 주석으로 하는 것이 좋음 ! */
console.log('app 변수 내에서 출력')
}
{h1}
{form}
</div>
);
React 컴포넌트
문법
[문법]
* 함수 선언식를 예로 문법 설명한 것
function 대문자로시작(props 라 불림) {}
// props : properties(속성들) 약자
// props 의 타입은 객체(object) - {키 : 값}
return (
// 리액트 엘리먼트
)}
아래 예제 코드로 설명 !
<body>
<div id="main"></div>
<hr>
</body>react element
먼저 변수에 담을건데, 함수로 만들기 전 작업이 react element 이다 !
props : { props : props } 로 임의로 props.nickname 으로 호출할 때 가져올 수 있다.
<script type="text/babel">
function H1(props) {
// Javascript 영역
console.log('H1() 실행');
console.log('props >> ', props);
return <h1>안녕하세요. { props.nickname }님</h1>
}
const name = '박보검'
const componentApp = (
<div>
<H1 nickname="홍길동"></H1>
<H1 nickname={name}/>
{H1({nickname : '조승연'})}
</div>
);
const main = document.getElementById('main');
ReactDOM.createRoot(main).render(componentApp);
</script>
호출했기 때문에 제일 먼저 조승연 → 홍길동 → 박보검이 된다 !
그렇다고 html 표현에서 순서 적용 되는 건 아니다
component 함수
2가지 방법이 있는데 class 또는 fuction 이 있는데 function 을 더 사용한다
컴포넌트 이름은 반드시 대문자로 시작한다.
props : 프로퍼티
function Greeting({title, description}) { // ({props, description}) : 구조분해할당된 것
// JS 영역
// 매개변수가 2개 이상의 값을 받으면 객체 형태로 받게 됨
console.log('title >> ', title)
console.log('title type>> ', typeof title)
// JSX 영역
return (
<div>
<h1>{title}</h1>
<h2>{description}</h2>
</div>
);
}
예시
https://print-blue.tistory.com/191
[JavaScript ] 예시 1. 순수한 자바스크립트 페이지
# p240530/react/ex01-javascript.html 상품 1 페이지 추가 🤍 기본 페이지기능 1. 좋아요 버튼 클릭시 하트 색 변경&이미지 추가된 모습\
print-blue.tistory.com
https://print-blue.tistory.com/193
[React] 예시 2. 순수한 자바스크립트 페이지를 리액트 component 로 바꾸기
https://print-blue.tistory.com/191 [JavaScript ] 예시 1. 순수한 자바스크립트 페이지# p240530/react/ex01-javascript.html 상품 1 페이지 추가 🤍 기본 페이지기능 1. 좋아요 버튼 클릭시 하트 색 변경&이미지 추가
print-blue.tistory.com
https://print-blue.tistory.com/194
[React] 예시 3. 순수한 자바스크립트 페이지를 리액트 component 로 바꾸고 이벤트 기능 추가
https://print-blue.tistory.com/191 [JavaScript ] 예시 1. 순수한 자바스크립트 페이지# p240530/react/ex01-javascript.html 상품 1 페이지 추가 🤍 기본 페이지기능 1. 좋아요 버튼 클릭시 하트 색 변경&이미지 추가
print-blue.tistory.com
https://print-blue.tistory.com/195
[React] 예시 4. 순수한 자바스크립트 페이지를 리액트 component 로 바꾸고, 기능 추가하기(상태 설정
https://print-blue.tistory.com/191 [JavaScript ] 예시 1. 순수한 자바스크립트 페이지# p240530/react/ex01-javascript.html 상품 1 페이지 추가 🤍 기본 페이지기능 1. 좋아요 버튼 클릭시 하트 색 변경&이미지 추가
print-blue.tistory.com
https://print-blue.tistory.com/195
[React] 예시 4. 순수한 자바스크립트 페이지를 리액트 component 로 바꾸고, 기능 추가하기(상태 설정
https://print-blue.tistory.com/191 [JavaScript ] 예시 1. 순수한 자바스크립트 페이지# p240530/react/ex01-javascript.html 상품 1 페이지 추가 🤍 기본 페이지기능 1. 좋아요 버튼 클릭시 하트 색 변경&이미지 추가
print-blue.tistory.com
https://print-blue.tistory.com/198
[React] 예시 5. 순수한 자바스크립트 페이지를 리액트 component 로 바꾸고, 기능 추가 후 유효성 검
https://print-blue.tistory.com/191 [React] 예시 1. 순수한 자바스크립트 페이지를 리액트 JSX 문법으로 바꾸기1. 자바스크립트로 구현# p240530/react/ex01-javascript.html 상품 1 페이지 추가 🤍 기본 페이지기능
print-blue.tistory.com
https://print-blue.tistory.com/200
[React] 예시 5. 순수한 자바스크립트 페이지를 리액트 component 로 바꾸고, 기능 추가 와 유효성 검
https://print-blue.tistory.com/191 [React] 예시 1. 순수한 자바스크립트 페이지를 리액트 JSX 문법으로 바꾸기1. 자바스크립트로 구현# p240530/react/ex01-javascript.html 상품 1 페이지 추가 🤍 기본 페이지기능
print-blue.tistory.com
https://print-blue.tistory.com/201
[React] 예시 7. 순수한 자바스크립트 페이지를 리액트 component 로 바꾸고, 기능 추가 와 유효성 검
https://print-blue.tistory.com/191 [React] 예시 1. 순수한 자바스크립트 페이지를 리액트 JSX 문법으로 바꾸기1. 자바스크립트로 구현# p240530/react/ex01-javascript.html 상품 1 페이지 추가 🤍 기본 페이지기능
print-blue.tistory.com
https://print-blue.tistory.com/202
https://print-blue.tistory.com/204
[React] 예시 9. 이전 작업 node.js 환경 세팅
https://print-blue.tistory.com/201 코드 옮기기 node.js 환경에서는 자동으로 react 를 가져올 수 없어서 import 해줘야 함 import React from 'react'; 이미지 폴더가 없어서 이미지가 깨지는데 public 폴더에 복사
print-blue.tistory.com
클라이언트 사이드 (Client side Rendering)
https://ko.legacy.reactjs.org/
React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
A JavaScript library for building user interfaces
ko.legacy.reactjs.org
https://ko.legacy.reactjs.org/docs/add-react-to-a-website.html
웹사이트에 React 추가 – React
A JavaScript library for building user interfaces
ko.legacy.reactjs.org
https://ko.legacy.reactjs.org/docs/introducing-jsx.html
JSX 소개 – React
A JavaScript library for building user interfaces
ko.legacy.reactjs.org
https://velog.io/@dlsdk0601/React-%EA%B8%B0%EC%B4%88-%EC%A0%95%EB%A6%AC-1%ED%8E%B8
React 기초 정리 1편
리액트 개념 정리를 해보려고 하는 이유를 먼저 설명드리자면,저는 국비지원을 통해 교육받고 프론트엔드 개발자로 전향했습니다.이미 국비교육을 들으면서 느꼈던 단점중 하나는,같이 수업을
velog.io
https://modulabs.co.kr/blog/react-library/
리액트(React)를 왜 사용해야 할까? - 리액트가 강력한 이유
React 는 프론트엔드 언어 중에서도 가장 인기 있고 많은 팬을 가지고 있습니다. 이 글에서는 React라는 라이브러리를 사용하는 이유를 살펴보려 합니다. React 를 처음 시작하는 분들에게 도움이 되
modulabs.co.kr
React를 사용하는 이유는 뭘까?
처음 프론트앤드 공부를 시작하게 되었고, 자바스크립트를 배우면서 자연스럽게 리액트를 사용하게 되었습니다. 왜 사용하게 됐는지에 대한 질문을 받는다면 '매우 인기 있는 라이브러리', '많
velog.io
