개발 공부

- 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 한다.- 예를 들어 버튼에 마우스 커서를 올렸을 때는 onmouseover 이벤트를 실행하고, 클릭했을 때는 onclick 이벤트를 실행한다. Form 요소는 값이 바뀔 때 onchange 이벤트를 실행한다. 리액트의 이벤트 시스템- 리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤 비슷하다.- 다음 코드를 살펴 보자.import { useState } from 'react';const Say = () => {    const [message, setMessage] = useState('');    const onClickEnter = () => setMessage('안..

- 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.- props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다.- props를 바꾸려면 부모 컴포넌트에서 바꿔 줘야 한다. - 리액트에는 두 가지 종류의 state가 있다. - 하나는 클래스형 컴포넌트가 지니고 있는 state이고, 다른 하나는 함수 컴포넌트에서 useState라는 함수를 통해 사용하는 state 이다. 클래스형 컴포넌트의 state- 새로운 컴포넌트를 만들자. Counter.js 파일을 src 디렉터리에 생성하여 다음 코드를 작성해 보자. * Counter.jsimport { Component } from 'react';class C..

Props- props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소다.- props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다. JSX 내부에서 props 렌더링- MyComponent를 수정해 해당 컴포넌트에서 name이라는 props를 렌더링하도록 설정한다.- props 값은 컴포넌트 함수의 파라미터로 받아 와서 사용할 수 있다.- props를 렌더링할 때 JSX 내부에서 { } 기호로 감싸 주면 된다. * src/MyComponent.jsconst MyComponent = props => {    return div>안녕하세요, 제 이름은 {props.name}입니다.div>}; export default MyComponent;  컴포넌..

인라인 스타일링- 리액트에서 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 변수의 값이 '리액트'가 아닌 경우 '..