2021.04.09
"리액트를 다루는 기술"
JSX란?
JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다. JSX는 브라주에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. JSX를 사용할 때, 여러 개의 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다는 점을 기억할 것. (예를 들어, Fragment라던지...)
조건부 연산자(삼항 연산자)
JSX 내부의 자바스크립트 표현식에서는 if문을 사용할 수 없다. 조건에 따라 다른 내용을 렌더링 해야 할 때는 JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, {} 안에 조건부 연산자를 사용하면 된다.
function App() { const name = '리액트'; return ( <div> {name === '리액트' ? (<h1>리액트 입니다.</h1>) : (<h2>리액트가 아닙니다.</h2>)} </div> ); }
이렇게 코드를 작성하면 if문을 대체할 수 있다.
AND 연산자(&&)를 사용한 조건부 렌더링
이런식으로 AND연산자를 이용해 조건부 렌더링을 할 수 있다. 마찬가지로, OR(||) 연산자를 사용하면 해당 값이 undefined일 때 사용할 값을 지정할 수 있으니 알아두자.
인라인 스타일링
CSS/HTML처럼 작성하여 적용해주면 되는데, 리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야한다. 스타일 이름 중 - 문자가 포함되는 것은 카멜 표기법으로 작성한다.
defaultProps와 porpTypes
defaultProps는 porps의 값을 따로 지정하지 않았을 때 보여줄 기본 값을 설정한다.
이런식으로 해당 Component에 설정하면 된다.
porpTypes는 Component의 필수 props를 지정하거나 특정 props의 타입을 지정할 때 사용한다.
프로젝트를 진행하거나 협업 할 때 해당 Component에 어떤 props가 필요한지 쉽게 알 수 있으니 사용법을 알아두자.
