- 선언형 (Declarative)
코드를 깊게 살펴보지 않아도 코드가 의도하는 바를 알 수 있다.- 컴포넌트 기반 (Component-Based)
컴포넌트란 하나의 기능을 구현하기 위해 여러 종류의 코드를 묶어놓은 것이다. 컴포넌트로 분리된 코드는 독립적이며 재사용이 가능하다. 이는 우리가 기능에 집중할 수 있도록 도와주며, 유지보수나 유닛 테스트를 하기 편하게 해준다.- 범용성 (Learn Once, Write Anywhere)
안정적이고 유명하다. 모바일에서도 사용 가능하다.
JSX는 React에서 UI를 구성할 때 사용하는 문법이다. JavaScript와 HTML의 문법을 모두 사용하기 때문에 기능과 구조를 한 번에 알아볼 수 있다. JSX는 JavaScript와는 분명히 다르며, Babel이 JSX를 JavaScript로 컴파일시켜준다.
위에서 설명했다 !
+) React의 친구들!
Angular, Vue, Svelte 등
React를 사용한 어플을 만들 때 초기 세팅을 해주는 프로그램이다.
Yes ! 🙄
Yes ! 🤨
인덱스를 랜덤으로 뽑기 !
const getRandomIndex = (length) => { return parseInt(Math.random() * length); }
Yes ! 🤔
- 하나의 엘리먼트 안에 모든 엘리먼트가 포함된다.
- 엘리먼트 클래스 사용 시
className
으로 표기한다.const Sidebar = () => { return ( <section className="sidebar"> <i className="far fa-comment-dots"></i> <i className="far fa-bell"></i> </section> ); };
- JavaScript 표현식 사용 시
{중괄호}
를 이용한다.<div className="tweet__profile"> <img src={tweet.picture}></img> </div>
- 사용자 정의 컴포넌트는
대문자
로 시작한다. (PascalCase)- 조건부 렌더링에는
삼항연산자
를 사용한다.const tweetUserNameClass = isParkHacker ? 'tweet__username--purple' : 'tweet__username'
- 여러 개의 HTML 엘리먼트를 표시할 때,
map()
함수를 이용한다. 반드시"key"JSX속성
을 넣어야 한다.{dummyTweets.map((tweet) => { return ( <li className="tweet" key={tweet.id} <div className="tweet__profile"> <img src={tweet.picture}></img> </div> </li> ); })}
Yes ! 😮
OK ! 👌
Yes 😁