[새싹(SeSAC) 프론트엔드] day29 221124
📍React 란
: 페이스북이 만든 사용자 UI 구축을 위한 라이브러리
| 프레임워크 | 라이브러리 |
| - 일정한 형태와 기능을 갖추고 있는 골격 또는 뼈대를 의미 - 개발 시 필수적인 기능을 제공 - 프레임워크가 정해준 방식을 따라 코딩을 해야함 (개발자의 자유도가 떨어짐) |
특정 기능을 구현하기 위해 밀 만들어진 코드 또는 함수의 집합 |
| angular, vue.js, spring, Django 등 | React, JQuery, tensorflow, pandas 등 |
| 코드의 제어 흐름을 개발자가 조정할 수 없음 ex. 밀키트 |
코드의 제어 흐름을 개발자가 조정할 수 있음 ex. 마트에서 개발 재료 구매 |
** 코드 주도권이 어디에 있느냐가 제일 큰 차이일 듯
- npm trends
📍특징
1. Component 기반
: 리액트로 만들어진 앱을 이루는 최소한의 단위
- 사용자가 정의한 태그를 의미
- 코드를 기능별로 나눠서 작성
[특징 및 장점]
- 빠르고 효율적인 화면 구성 가능
- 코드의 재사용성 및 유지보수가 편리
- UI를 독립적으로 구성하여 재사용 가능. 기존 컴포넌트를 통해 새로운 컴포넌트를 쉽게 생성 가능
[구성]
- 프로퍼티(props)
- state
- 컨텍스트
[선언방식]
- 함수형 컴포넌트
- 클래스형 컴포넌트
2. Virtual DOM
: 빠른 화면 출력 속도
- 수정된 내용이 있으면 수정이 일어난 영역만 갱신됨
➡️ 페이지를 그리는 속도(렌더링)가 빠름
ex. JQuery : 간결한 코드로 화면 구성 가능하지만 virtual dom을 사용하지 않기 때문에 화면의 일부분만 수정되어도 화면 전체를 다시 그려야 함
3. JSX문법 사용
: 자바스크립트안에서 HTML 문법을 사용하여 view를 구성할 수 있도록 도와주는 문법
** 자바스크립트와 html을 혼용하여 사용하는 것
- 하나의 파일에 자바스크립트와 HTML을 동시에 작성할 수 있어서 편리함
- 개발자는 화면에만 집중해서 개발 가능
- 리엑트 엔진이 JSX를 내부적으로 자바스크립트 코드로 변환시켜서 작동시킴
function HelloMessage({ name }) {
return <div>Hello {name}</div>;
}
ReactDOM.render(
<HelloMessage name=“Soo" />,
document.getElementById('root')
);
리엑트 엔진이 JSX를 내부적으로 자바스크립트 코드로 변환
**사용하는 이유
1. 가독성 향상
: 중첩된 선언형 구조를 잘 나타냄
2. 팀의 생산성 향상
: HTML과 비슷하여 전문 개발자가 아니더라도 직접 코드 수정이 가능
**react를 사용하는 기업
- Dropbox, BBC, airbnb, facebook, uber, Microsoft
📍React 프로젝트 생성
$ npx create-react-app react-app
$ npm start
📍유용한 extension 설치
reactjs code snippets
- rsc 입력 시 자동완성 tjs code snippetsreactjs code snippets
Reacth Developer Tools
접속한 사이트가 리액트 사이트 인지 구분할 수 있음
📍리액트 동작 원리
// index.js
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
{/* app.js에 들어있는 내용을 가져옴 */}
<App />
</React.StrictMode>
);
- 추가 및 제거되는 element만 업데이트함
react에서 작성시 부모 태그로 감싸줘야 함
[오늘의 에러] Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? 에러
리액트로 프로젝트를 하다가 에러가 났다 😇 하하!adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?다양한 이유가 있겠지만 나같은 경우는
velog.io
📍JSX문법 작성 규칙
1. 반드시 하나의 부모 태그로 감싸는 형태여야 함
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<p>HAHAHAHAHA </p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
2. 의미없는 태그인 경우, <></> 형식으로 작성 가능
return (
<>
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<p>HAHAHAHAHA </p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</>
);
3. 자바스크립트 표현식
: 중괄호 {}로 감싸는 형태여야 함
function App() {
const name = "yuuulya";
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<p>{name} </p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
4. if, for 와 같은 구문은 사용할 수 없음
- return 안에서 사용할 수 없을 뿐 밖에서 사용 가능함
- return 안에서 사용하고 싶다면
1) 조건부 연산자(삼항 연산자)를 사용
function App() {
const name = ‘yuuulya'
return (
<div>
{ name === ‘yuuulya’ ? (<h1>맞음</h1>) : (<h1>틀림</h1>) }
</div>
); }
2) AND 연산자 (&&) 를 사용
: 특정 조건을 만족할 때 내용을 보여주고, 만족하지 않을 때 아무것도 렌더링 하지 않아도 되는 경우에 사용
function App() {
const name = ‘yuuulya'
return (
<div>
{ name === ‘yuuulya’ && <h1>안녕</h1> }
</div>
);
}
5. HTML 태그는 반드시 닫아야 함
- XML 마크업 규칙을 따름
: img, br, input등 html에서 닫지 않아도 태그를 jsx에서는 반드시 닫아야 함
6. class 대신 className 을 사용 - js에 class 객체가 있으므로 혼용방지
function App() {
const name = ‘Sooa'
return (
<div className=“myclass”>
<div>안녕하세요.</div>
<div>{name}</div> </div>
);
}
7. CSS style을 사용시 객체 형태로 작성해야 함
: 속성 이름은 카멜 표기법으로 작성
const style = {
backgroundColor: "red",
fontSize: "12px",
};
return (
<div>
<div>{name === "yuuulya" ? <span>맞음</span> : <span>틀림</span>} </div>
<div>{result}</div>
<div style={style}>반가워요</div>
<div style={{fontSize : '40px'}}>반가워요</div>
</div>
)
뭐가 됐건 제대로 작성이 다 잘되서 comile이 성공적으로 끝나야지 원하는 결과를 볼 수 있음
주석
{/* 주석 사용하기 */}
** import했는데 사용하질 않으면 에러가 남
// import logo from "./logo.svg";
import "./App.css";
기존 웹 프레임워크 동작 방식
함수형 컴포넌트
function Welcome() {
return <h1> Hello </h1>;
}
클래스형 컴포넌트
class Welome extends React.component {
render() {
return <h1>Hello</h1>;
}
}
.js
.jsx
에 있어서 큰 차이는 없지만 파일 아이콘도 변경되고 확장자 명 자체로 js와 react파일을 구분시킬 수 있어서 유용함
index.js - app.js 의 기본요소이며 component를 추가하고 싶다면 새로운 .js를 만들어서 작성
파일을 import 해주는 영역은 app.js
프로퍼티 (properties , props)
- 상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용 데이터
- 단방향 데이터 흐름으로 프로퍼티 값은 수정이 불가능함
<하위 컴포넌트명 전달하려는 속성명 = 전달하려는 값/>
프로퍼티를 여러개 사용하고 싶다면 옆에 나란히 바로 써주면 됨
html 태그 안에 name, id, class 주듯이
➡️ 그래서 콤마, 도 찍으면 안됨
문자 이외의 값을 전달 시 중괄호{} 사용
- 숫자, 불리언, 객체, 함수 등등
props통해 값을 전달할 때 모든 객체안의 키값을 사용해 주지 않아도 오류나지 않음
1.
2.
3. 비구조화 할당 (=구조 분해) 문법 사용
: 일반적으로 많이 사용
불리언 프로퍼티 사용하기
boolvalue