[React] JSX 기본 익히기

React Process

index.html 에서 id가 root인 div를 호출합니다. index.js 파일의 ReactDom.render가 root에 해당합니다.

root는 기본적으로 App 컴포넌트를 호출합니다. App 컴포넌트가 최상단 컴포넌트라고 할 수 있습니다.

Import / Export

Import는 다른 js, css, image 등의 파일 내용을 해당 파일에서 사용하기 위해 필요하다.

조금 특이한 점은 import시 대상 파일에서 사용할 컴포넌트 명을 명시해주어야한다는 점이다.

import Another, {Conatiner, CustomButton} from './Container';
//Container.js 파일의 Container, CustomButton 컴포넌트를 사용하려면 정의
//Another.Container, Another.CustomButton 의 형식으로 참조할 수도 있다.

또한, 사용되는 파일에서는 해당 컴포넌트를 export 해주어야한다.

//Container.js 파일의 최하단부에 삽입
export default Container;

//혹은 정의와 동시에 export할 수도 있다.
export const Container = {
...
}

 

JSX에서 자바스크립트 사용하기

React는 JSX를 기반으로 합니다. JSX는 html과 JS를 혼용해서 사용합니다.

JSX에서 자바스크립트를 사용하려면 {}로 묶어주어야합니다.

const name = 'pitter park'

return (
	<div>
    	{name}
    </div>
)

 

 

JSX에서 css 값 설정하기

JSX에서 css 속성을 설정하는 방법은 html과 다릅니다.

//width를 30으로 설정한다. px는 생략할 수 있다.
//만약 %나 vh, vw 등을 사용하고 싶다면 30 + "%"를 삽입하면 된다.
<div className="MyDiv" style={width:30}></div>



//style을 모듈화 할 수도 있다.
const style = {
	width : 30 + '%'
    color: 'white',
    fontSize: 15,
    padding: '1em' 
    //fontSize에 비례한다. rem은 일반적인 기본 폰트 값 16에 비례한다.
    //em은 잘 사용하지 않으며 rem을 주로 사용한다.
    //사용자의 웹 설정에 따라 값이 변하므로 어떤 환경이든 사용성이 동일하게 할 수 있다.
  }
  
<div className="MyDiv" style={style}></div>

 

 

컴포넌트에 매개변수 전달하기

컴포넌트에 전달하는 매개변수를 속성(properties)라고 한다.

리액트에서는 이를 줄여 props라고 하는데 특이하게 컴포넌트의 매개변수부에 모든 속성을 기입하는 것이 아니라 props만 기입하면 된다.

또, 리액트에서는 순수 함수를 유지해야하는 법칙이 존재하는데 이는 props의 기본 값을 변경하면 안된다는 법칙이다.

 

//호출
<Container id="1"></Container>

const Container = (props) => {
	return (
    	<div>{props.id}</div>
        )
}

 

변수를 직관적으로 호출하고싶다면 다음과 같이 정의할 수 있다.

//호출
<Container id="1" color="red"></Container>

//여러개의 props를 받을 때에는 반드시 {}로 감싸주어야한다.
const Container = ({id, color}) => {
	return (
    	<div>{id}</div>
        <div>{color}</div>
        )
}

 

 

props 기본 값 부여

props는 입력이 강제되지 않기 때문에 호출 시 입력하지 않아도 된다.

값이 없는 경우 null이 출력되며, JSX에서는 아무것도 나타나지 않는다. 아래와 같이 간단하게 기본 값을 부여할 수 있다.

const Container = ({id = "no.0"}) => {..}

 

혹은 defaultProps를 사용하기도 한다. defalutProps가 위의 방법보다 우선순위가 높다.

const Container = ({id}) => {..}

Container.defaultProps = {
	id : "No.0"
    }

 

 

태그형태의 props

컴포넌트를 호출할 때 태그 사이에 다른 태그를 삽입할 수 있다.

일반적으로 커스텀된 컴포넌트는 사이에 삽입된 태그가 무시되는데, props에 고정되있는 변수인 children을 사용해 사이에 삽입된 태그를

해당 컴포넌트에서 활용할 수 있다. 태그형태의 props라고 생각하면 된다.

<Container>
	<div>react</div>
</Container>


const Container = ({children}) => {
	return (
    	<div>
        	{children}
        </div>
    )
}

 

 

조건에 따른 랜더링

JSX에서는 태그들 사이에서 if문을 사용할 수 있다. 하지만 가독성을 위해 삼항연산자를 사용하는 것이 좋다.

null을 반환하면 아무것도 출력되지 않기에 조건에 부합하지 않는다면 null을 반환하면 된다.

null을 반환하는 경우를 위해 && 연산자가 존재한다.

return (
  {isSelected ? <b>Yes<b> : null}
)

return (
  {isSelected && <b>Yes<b>}
)
//위 아래 모두 같은 동작이다.