개발 공부

인라인 스타일링- 리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 한다.- 스타일 이름 중에서 background-color 처럼 - 문자가 포함되는 이름이 있는데, 이러한 이름은 - 를 제거하고 카멜 표기법으로 작성해야 한다. (backgroundColor) import './App.css';function App() { const name = '리액트'; const style = { backgroundColor : 'black', color : 'aqua', fontSize: '48px', // font-size -> fontSize fontWeight: 'bold', ..

- 리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안 된다.- 다음과 같은 코드는 오류를 발생시킨다.import './App.css';function App() { const name = undefined; return name;}export default App;   - 어떤 값이 undefined 일수도 있다면, OR( || )연산자를 사용하면 해당 값이 undefined일 때 사용할 값을 지정할 수 있으므로 간단하게 오류를 방지할 수 있다.import './App.css';function App() { const name = undefined; return name || '값이 undefined입니다.';}export default App;  - 반면 J..

- JSX 내부의 JS 표현식에서 if문을 사용할 수는 없다.- 히지만 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나,  { } 안에 조건부 연산자를 사용하면 된다.- 조건부 연산자의 또 다른 이름은 삼항 연산자이다. function App() { const name = '리액트'; return ( {name === '리액트'?( 리액트입니다. ) : ( 리액트가 아닙니다. )} );}export default App; - name 변수의 값이 '리액트' 인 경우에는 '리액트입니다.' 를 화면에 출력하고, name 변수의 값이 '리액트'가 아닌 경우 '..

JSX- JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다.- 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.function App() { return ( Hello react );} - 이렇게 작성된 코드는 다음과 같이 변환된다.function App(){ return React.createElement("div", null, "Hello", React.createElement("b", null, "react"));} - 만약 컴포넌트를 렌더링할 때마다 JSX 코드를 작성하는 것이 아니라 위 코드처럼 매번 React.createElement 함수를 사용해야 한다면 매우 불편할 것..