안녕 React! 👋🏻
리액트는 자바스크립트의 라이브러리로 좀 더 효율적으로 프론트엔드 개발을 하기 위해 사용한다.
<React 3가지 특징>
1. 선언형 : 코드를 자세히 분석하지 않고도 코드의 의도를 분명히 알 수 있게 작성한다.
=> 코드를 작성할 때 '페이지가 어떻게 보일지(내가 무엇을 원하는지)'에만 신경쓰고, '어떻게 렌더링 할 지'에는 신경을 쓰지 않는다. (<-----> 명령형 프로그래밍 : 어떻게 할 지에 대해 작성)
=> 코드를 예측 가능하고, 디버그하기 쉽게 만듦. (프로그램의 복잡성을 줄여줌)
var numbers = [1,2,3,4,5,6];
var result;
//명령형
result = 0;
for(let i = 0; i < numbers.length; i++){
if(numbers[i] % 2 === 0){
result += numbers[i] * 2;
}
}
//선언형
result = numbers
.filter(i => i % 2 === 0)
.map(i => i * 2)
.reduce((acc,next) => acc + next);2. 컴포넌트 기반 : 하나의 기능을 구현하기 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발하는 것.
=> 서로 독립적이고 재사용 가능한 컴포넌트를 통해 기능 자체에 집중해 개발할 수 있음.
**3. 범용성 : ** 자바스크립트 프로젝트 어디든 유연하게 적용 가능.
=> 페이스북에서 관리되어 안정적, 유명, 리엑트 네이티브로는 모바일 개발도 가능.
=> 기존에 다른 프레임워크로 개발하던 웹 어플리케이션에 리액트 추가해서 개발 가능.
JSX
-
React에서 UI를 구성할 때 사용하는 문법으로 자바스크립트를 확장한 문법!
-
JSX = JavaScript XML
-
브라우저가 바로 실행할 수 있는 Js 코드가 아니라서 Babel*로
'JSX를 브라우저가 읽을 수 있는 Js로 컴파일 => Js를 브라우저가 읽고 화면에 랜더링'
하는 과정 필요.
(Babel은 자바스크립트의 컴파일러 (자바스크립트로 결과물을 만들어주는 컴파일러!))
-
JSX를 이용하면 JS만으로도 마크업 코드를 작성해 DOM에 배치할 수 있음.
(DOM과 다르게 React는 CSS,JSX 문법만 가지고 웹 애플리케이션 개발도 가능) -
JSX 없이도 리액트 요소를 만들 수 있으나 코드가 복잡 & 가독성 떨어짐
return React.createElement(
'hi',null,'Hello,${formatName(user)}!`
)//복잡, 가독성 떨어짐
return <h1>Hello, {formatName(user)}!</h1>;
//덜 복잡, 가독성 높음 <알고 있어야 하는 JSX문법>
⭐️ 여러 요소들 작성할 때 최상위에서 opening tag/closing tag로 감싸주기
//X
<div>
<h1>Hello</h1>
</div>
<div>
<h2>World</h2>
</div>
//O
<div>
<div>
<h1>Hello</h1>
</div>
<div>
<h2>World</h2>
</div>
</div>⭐️ CSS 클래스 속성 지정할 때 className으로 표기!
<div className = "greeting">Hello</div>⭐️ JSX에서 JS를 쓸 때 중괄호 이용! (중괄호 없이 적으면 일반 텍스트로 인식)
중괄호 안에는 유효한 모든 Js 표현식을 넣을 수 있음.
//예시 1 : name이라는 변수 사용하기
function App(){
const name = 'Josh Perez';
return (
<div>
Hello, {name}!
</div>
);
}//예시 2: js 함수 호출 결과인 formatName(user)을 <h1>엘리먼트에 포함 함.
function formatName(user){
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);⭐️ React 엘리먼트가 JSX로 작성되면 대문자로 시작해야 함. 이렇게 작성된 JSX 컴포넌트를 사용자 정의 컴포넌트라고 부름.
(소문자 시작하면 일반적 HTML 엘리먼트로 인식함)
function Hello(){
return <div>Hello!</div>;
}
function HelloWorld(){
return <Hello />;//얘가 JSX로 작성된 React 엘리먼트!
}⭐️ 조건부를 랜더링 할 때는 if문이 아닌 '삼항 연산자'이용!
<div>
{
(1+1 === 2) ? (<p>정답</p>) : (<p>탈락</p>)
}
</div>삼항연산자는 if문과 다르게 '표현식'이기 때문에 변수에 할당이 가능하다.
표현식은 평가가 되어 특정한 타입의 값을 만들어 내거나 기존값을 참조할 수 있는 '문'을 말하고,
표현식이 아닌 '문'은 값으로 평가될 수가 없는 문을 말하는데 변수에 할당할 수 없고, 참조할 수도 없다.
(문, 표현식 등 공부 필요)
let a = if(1+1 === 2) {
return '팟탱'
}else{
return '안팟탱'
}// Uncaught SyntaxError : Unexpected token 'if'와 같은 에러가 남.
let a = 1+1 === 2 ? '팟탱' : '안팟탱';
a //팟탱이라고 제대로 출력된다. ⭐️ 여러 개의 HTML 엘리먼트 표시할 때는 map() 함수 이용!
=> map 함수를 사용할 때 반드시 'key' JSX 속성을 넣어야 함. (아니면 오류 발생)
cont 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}>//key 지정해주기!
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
);
return (
<div>
{content}
</div>
);
}key는 리액트가 어떤 항목을 변경, 추가, 삭제할 지 식별하는 것을 돕는다. key는 요소에 고유성을 안정적으로 부여하기 위해 배열 내부의 요소로 지정해야 함. 대부분 ID를 key로 사용. ID가 없다면 최후 수단으로 항목의 인덱스를 key로 사용할 수 있으나 항목의 순서가 바뀔 수 있는 경우 인덱스를 사용하는 것은 성능 저하나 컴포넌트 state 관련 문제가 발생할 수 있다. (리액트 공식 문서 참고)
