JSX
JSX의 규칙
- JSX에서는 모든 태그를 닫아줘야 한다.
function App() {
let name = '임하나';
return (
<div className="App">
<MyHeader/>
<header className="App-header">
<h2>안녕 리액트 {name}</h2>
</header>
<img />
<br/>
<MyFooter/>
</div>
);
}- 최상위 태그 규칙
return 하려면 최상위 태그 하나로 묶어줘야한다.
만약 최상위 태그를 아무거나 넣고 싶지 않다면, React.Fragment를 써준다. React.Fragment 귀찮다면, ' <></>' 이런 빈 태그를 작성해도된다.
import React from 'react';
import './App.css';
function App() {
let name = '임하나';
return (
<React.Fragment>
<header className="App-header">
<h2>안녕 리액트 {name}</h2>
</header>
</React.Fragment>
);
}
export default App;JSX CSS 스타일링 해주기
JSX에서는 class를 'className'을 써준다.
- css파일을 사용하기
기존과 동일하게 css파일을 생성해주고, 스타일링을 해준다.
(대신 클래스를 className으로 넣어준다)
import React from 'react';
import './App.css';
import MyHeader from './MyHeader';
function App() {
let name = '임하나';
return (
<div className='App'>
<MyHeader/>
<h2>안녕 리액트 {name}</h2>
<b id="bold_text">React bold Text</b>
</div>
);
}
export default App;- 인라인으로 스타일 주기(객체를 만들어서 사용)
function App() {
let name = '임하나';
const style = {
App:{
backgroundColor:'black',
},
h2:{
color:'red',
},
bold_text:{
color:'green'
}
}
return (
<div style={style.App}>
<MyHeader/>
<h2 style={style.h2}>안녕 리액트 {name}</h2>
<b id="bold_text" style={style.bold_text}>React bold Text</b>
</div>
);
}JSX의 javascript 값을 사용하기
JSX의 중괄호 안에는 값을 포함할 수 있지만, 숫자나 문자열만 포함할 수 있다.(배열,불값은 안됨)
JSX의 중괄호와 함께 삼항연산자 사용하기 - 조건부 렌더링
function App() {
let name = '임하나';
const number = 5;
return (
<div style={style.App}>
<MyHeader/>
<h2 style={style.h2}>안녕 리액트 {name}</h2>
<b id="bold_text" style={style.bold_text}>
{number} 는 : {number%2 === 0? '짝수':'홀수'}
</b>
</div>
);
}State
State(상태)란?
계속해서 변화하는 특정 상태
상태에 따라 각각 다른 동작을 한다.
useState
import React, {useState} from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return(
<div>
<h2>{count}</h2>
<buttton>+</buttton>
<buttton>-</buttton>
</div>
)
}
export default Counter;const [count, setCount] = useState(0);useState의 메서드는 배열의 반환하고, 배열의 비구조화할당을 통해서 0번재 인덱스 count를 첫번째 인덱스 setCount라는 상수를 받아온다.
count를 상태의 값으로 사용.
setCount는 count 상수를 변화시키는 상태변화 함수로써 사용을 한다.
useState(0)은 count라는 상태를 만드는데 초기값으로 사용된다.
+,-버튼 클릭 시 1씩 증가, 감소
import React, {useState} from 'react';
const Counter = () => {
//0에서 출발
//1씩 증가하고
//1씩 감소하는
//count 상태
const [count, setCount] = useState(0);
const onIncrease = () => {
setCount(count+1);
}
const onDecrease = () => {
setCount(count-1);
}
return(
<div>
<h2>{count}</h2>
<buttton onClick={onIncrease}>+</buttton>
<buttton onClick={onDecrease}>-</buttton>
</div>
)
}
export default Counter;컴포넌트는 자신이 가진 state가 변화하면, 화면이 다시 그린다(리렌더)
함수가 다시 호출 된다.
Props
컴포넌트에 데이터를 전달하는 방법
import React from 'react';
import './App.css';
import Counter from './Counter';
function App() {
return (
<>
<Counter initialValue={5}/>
</>
);
}
export default App;부모컴포넌트인 App컴포넌트에서 자식 컴포넌트인 Counter컴포넌트에게 어떤 값을 이름을 붙여 전달하는 방식을 prop이라 부를 수 있다. (여러 개를 전달 할 수도 있다.)
Counter에서는 값을 매개변수로 받아서 사용할 수 있다.
const Counter = (props) => {
console.log(props);
}값은 객체로 반환된다.
값을 꺼내쓰려면 점표 기법으로 사용하면된다.
const Counter = (props) => {
console.log(props);
const [count, setCount] = useState(props.initialValue);
}prop을 여러개 전달 할떄는 객체로 만들어서 전달하는게 좋다.
(스프레드연산자 사용)
function App() {
const conterProps = {
a:1,
b:2,
c:3,
d:5,
initialValue:5,
}
return (
<>
<Counter {...conterProps}/>
</>
);
}받을때는 비구조화 할당으로 받는다.
const Counter = ({initialValue}) => {
}prop가 undefined로 전달될거같을때, 해결방법
전달받지 못한 값에 기본 값을 준다.
Counter.defaultProps={
initialValue:0,
}홀수 짝수 확인하기
Coutner.js
import React, {useState} from 'react';
import OddEventResult from './OddEventResult';
const Counter = () => {
const [count, setCount] = useState(0);
const onIncrease = () => {
setCount(count+1);
}
const onDecrease = () => {
setCount(count-1);
}
return(
<div>
<h2>{count}</h2>
<buttton onClick={onIncrease}>+</buttton>
<buttton onClick={onDecrease}>-</buttton>
<OddEventResult count={count}/>
</div>
)
}
export default Counter;Coutner.js
const OddEventResult = ({count}) => {
console.log(count)
return <>{count%2 === 0 ? '짝수' : '홀수'}</>
}
export default OddEventResult;리액트의 컴포넌트는 본인이 바뀔 때도 리렌더가되고,
나에게 내려오는 props가 바뀌어도 리렌더가되고,
자신이 바뀌지 않아도, 부모요소가 바뀌면 자식요소도 리렌더된다.
태그 감싸주기 children
Container.js
const Container = ({children}) => {
return(
<div style={{ margin:20, padding:20, border:'1px solid red'}}>
{children}
</div>
)
}
export default Container;App.js
import React from 'react';
import './App.css';
import Counter from './Counter';
import Container from './Container';
function App() {
return (
<Container>
<div>
<Counter />
</div>
</Container>
);
}
export default App;
