GuruSa

종종 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 할 필요가 있습니다. 이럴 때는 가장 가까운 공통 조상으로 state를 끌어올리는 것이 좋습니다. 이를 확인하기 위해 먼저 섭씨 입력을 받아 끓는 점인지 아닌지를 나타내는 코드를 작성하겠습니다. function BoilingVerdict(props) { if (props.celsius >= 100) { return The water would boil.; } return The water would not boil.; } class Calculator extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this..

JavaScript에서 map() 함수를 이용하여 numbers 배열의 값을 두배로 만든 후 map()에서 반환하는 새 배열을 doubled 변수에 할당하고 로그를 확인하는 코드는 아래와 같습니다. const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number * 2); console.log(doubled); React에서 배열을 엘리먼트 리스트로 만드는 방식은 이와 거의 동일합니다. 엘리먼트 모음을 만둘고 중괄호 {}를 이용하여 JSX에 포함 시킬 수 있습니다. function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((..

React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용하고, JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다. 이벤트 Activate Lasers React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault를 명시적으로 호출해야 합니다. 예를 들어, 일반 HTML에서 폼을 제출할 때 가지고 있는 기본 동작을 방지하기 위해 다음과 같은 코드를 작성할 수 있습니다. function Form() { function handleSubmit(e) { e.preventDefault(); console.log('You clicked submit.'); } return ( Submit ); } 여기서 e는 합성 이벤트입니다. React는 ..

이번에 React의 State와 Lifecycle에 대해 알아보겠습니다. state const root = ReactDOM.createRoot(document.getElementById('root')); function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); root.render(element); } setInterval(tick, 1000); 위의 코드를 완전히 재사용하고 Clock Component로 캡슐화하겠습니다. const root = ReactDOM.createRoot(document.getElementById('root')); function Clock(props) { return..

Element const element = Hello, world; 브라우저 DOM Element와 달리 React Element는 일반 객체이며(plain object) 쉽게 생성할 수 있습니다. React DOM은 React Element와 일치하도록 DOM을 업데이트합니다. HTML 파일 어딘가에 위와 같은 가 있다면, 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 root DOM 노드라고 부릅니다. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있습니다. React Element를 렌더링 하기 위해서는 우선 DOM Element를 R..

JSX에 대해 알아보겠습니다. const element = Hello, world!; 위의 문법은 JSX로 JavaScript를 확장한 문법입니다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다. JSX는 React Element를 생성합니다. React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결됩니다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 Component라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. React는 JSX 사용이 필수가 아니지만, JavaSc..