컴포넌트 🧩
리액트에서는 UI를 컴포넌트에 담아서 선언한다.
input이 있으면 output이 만들어지는 일종의 UI 조각이라고 이해하면 편하다.
const Hello = ({name}) =>
<div>Hello, {name} </div>함수형 컴포넌트
네이밍
- 컴포넌트의 이름은 대문자, 카멜식으로 만들기
Return
- XML 형태로 리턴해주기
(HTML과 비슷하게 생겼지만 JSX라고 불린다. )
내보내주기
- 다른 파일에서 컴포넌트를 쓰려면 export 해주어야 한다.
export default Hello;사용하기
- 컴포넌트를 사용할 파일에서 import 해준다.
// App.js
import Hello from './Hello'
function App() {
return (
<div className="App">
// 태그로 불러와준다. 여러번 호출해서 재사용할 수 있다.
<Hello />
<Hello />
<Hello />
</div>
);
}
export default App;
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
index.js에 있는 ReactDOM과 React.StrictMode는 무슨 역할을 할까?
ReactDOM 의 역할
-
document(페이지) 에서 아이디가 'root'인 것을 찾아 내부에 리액트
<App />을 넣어준다. -
리액트
<App />파일이<div>태그에 들어가게 된다. -
index.html이 화면에 뿌려진다. -
이때 아이디가 root인 요소는
public > index.html > <div id='root>에 위치해있다.
React.StrictMode (🔗 링크)
- StrictMode는 잠재적인 문제를 알아내기 위한 도구다.
- UI를 렌더링 하지 않으며, 자손들에 대한 검사와 경고를 발생시킨다.
- 사용하는 이유?
- 안전하지 않은 생명 주기를 사용하는 컴포넌트 발견
👉🏻 발견 후 경고 로그 출력 - 레거시 문자열 ref 사용에 대한 경고
- 권장되지 않는 findDOMNode 사용에 대한 경고
- 예상치 못한 부작용 검사
- 레거시 context API 검사
- 안전하지 않은 생명 주기를 사용하는 컴포넌트 발견
React Ref (🔗 링크)
-
HTML에서 DOM 요소에 id라는 속성을 넣어서 따로 관리를 해주듯이, ✨ Ref를 통해 리액트에서도 DOM에 이름을 달 수 있다.
-
일반적으로 리액트에서 부모와 자식 컴포넌트 사이엔
props를 통해 상호작용한다.- 자식을 수정하러면 새로운 props를 전달해서 자식을 다시 렌더링 해야한다.
👉🏻 근데 가끔 직접적으로 자식을 수정할 때 Ref를 사용한다.
- 자식을 수정하러면 새로운 props를 전달해서 자식을 다시 렌더링 해야한다.
- 언제 사용하는지?
state로만 해결할 수 없고, 반드시 DOM을 직접 건드려야 할 때 사용한다.- 특정 영역에 포커스 주기, 텍스트 선택 영역, 미디어 재생을 관리 할 때
- 애니메이션을 직접적으로 실행시킬 때
- 스크롤 박스 조작하기
- 서드 파티 DOM 라이브러리를 React와 같이 사용할 때
컴포넌트를 만들 때 JSX 규칙
JSX는 컴포넌트의 생김새를 정의할 때 사용하는 문법이다.
HTML처럼 생겼지만 사실 JS다.
- babel ⚙️
babel을 통해 HTML의 형태인 JSX가 JS로 변환된다.
1. 태그는 반드시 닫혀있어야 한다.
- 가끔 HTML에서 input, br 태그는 닫지 않을 때도 있다.
- JSX에서는 반드시 닫아줘야 한다.
<input></input>
// ❌ 태그 사이에 아무것도 안들어갈때
//이렇게 닫아주면 비효율적이다
// ⭕️ self-closing tag
<input />
<br />2. 두 개 이상의 태그는 하나의 태그로 감싸져 있어야 한다.
- fragment : 비어있는 태그
<> </>
//App.js
<div>
<Hello />
<div>안녕히계세요.</div>
</div>
// ❌단순히 감싸주기 위해서,
// 아무 의미 없이 div 태그로 묶어주면
// 스타일이 꼬일 수도 있음!
// ⭕️ 그럴때 fragment를 사용해준다.
<>
<Hello />
<div>안녕히계세요.</div>
</>3. JSX 안에서 JS의 변수 사용하기
JS 변수 사용하기 : 중괄호로 묶어주기
function App(){
const name = 'doyeon';
return(
<>
<div>{name}</div>
</>
)
}JSX 변수에 스타일 정의하기 : 문자열 형태가 아닌 객체 정의해주기
//❌ HTML에서는 inline으로 스타일을 정의해준다.
//React에서는 스타일을 정의해주려면 ⭕️ 객체로 만들어줘야 한다.
function App(){
const name = 'doyeon';
const style = {
// 대시(-)로 나누어져 있는 속성은
// ⭕️ 카멜케이스로 바꿔주자
backgroundColor: 'black',
color: 'aqua',
// 기본단위는 px, 따로 단위를 정해주자
fontSize: 24,
padding: '1rem'
};
return(
<>
<div style={style}>{name}</div>
</>
)
}JSX 변수에 클래스 지정해주기 : className
className이 아닌 class로 해줘도 작동은 하지만 콘솔창에 경고가 출력된다.
//❌ HTML 에서는 인라인으로 class='muyaho' 이렇게 지정해준다.
//⭕️ React에서는 class가 아닌 className으로 지정해준다.
// App.css
.gray-box{
background: gray;
width: 64px;
height: 64px;
}
//App.js
import './App.css';
function App() {
return (
<>
<div className="gray-box"></div>
</>
);
}JSX에서 주석 사용하기 : { /* */ }, //
/* 어쩌고저쩌고 */
// ❌ 화면에 그대로 출력된다.
{ /* 어쩌고저쩌고 */ }
// ⭕️ 중괄호로 감싸줘야 출력이 되지 않는다.
// ⭕️ 혹은 이렇게 슬래쉬 두개를 사용하면 된다.Props
Props는 properties의 줄임말이다.
우리가 컴포넌트를 사용할 때, 특정값을 전달해주고 싶으면 사용한다.
부모 컴포넌트 ---- (Props) ---> 자식 컴포넌트
ex) App.js에서 Hello.js로 Props를 보낸다.
// App.js
import Hello from './Hello';
import './App.css';
function App() {
return (
// ⭕️ props를 속성처럼 넣어주면 된다.
<Hello name="doyeon" color="blue"/>
);
}
export default App;//Hello.js
import React from 'react';
// ⭕️ props를 매개변수로 받아와서 사용한다.
function Hello(props) {
return <div style =
{{
backgroundColor: props.color
}}> {props.name} 안녕</div>;
}
export default Hello;