REACT ③ Adding Styles

🚩 해당 글은 유튜브 The Net Ninja와 React 공식문서를
공부한 토대로 작성된 글입니다. 혹시라도 잘못된 글이 있다면
댓글로 알려주세요 🏃‍♀️🏃‍♀️

■ Adding Styles

• JSX문법도 HTML과 똑같이 class를 통해 스타일링을 한다.
• 자바스크립 내에 쓰기 때문에 class키워드 대신 className 키워드를 사용한다.

Inline-style

const Navbar = () => {
  const newBlogStyle = { color: 'blue', backgroundColor: 'red'}
  return ( 
    <nav className="navbar">
      <h1>Kim's Blog</h1>
      <div className="links">
     // Inline-style 1 : style 태그 내에 그대로 style object를 삽입
        <a href="/" style={{
        color: 'blue',
        borderRadius: '4px';
        }}>HOME</a>

     // Inline-style 2 : variable 사용
        <a href="/create" style={newBlogStyle} >NEW BLOG</a>
      </div>
    </nav>
   );
}
 
export default Navbar;

• CSS class를 사용시 inline-style보다 퍼포먼스 측면에서 우수하기 때문에 class 사용 권장.

■ CSS-in-JS

• 배우지 않음 (추가예정)