deVSner

케이스로 나누어 본다. 1. 무한 렌더링 useEffect(() => { dispatch(loadToQuestion(id)); }); 2. 컴포넌트 실행 시 렌더링 useEffect(() => { dispatch(loadToQuestion(id)); },[]); 3. 특정 값에 따른 렌더링 useEffect(() => { dispatch(loadToQuestion(id)); },[변수]);

const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number * 2); console.log(doubled); 1. 여러개의 컴포넌트 렌더링 하기 엘리먼트 모음을 만들고 중괄호 {}를 이용하여 JSX에 포함 시킬 수 있습니다. 아래의 JavaScript map() 함수를 사용하여 numbers 배열을 반복 실행합니다. 각 항목에 대해 엘리먼트를 반환하고 엘리먼트 배열의 결과를 listItems에 저장합니다. const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => {number} ); ReactDOM.render( {listItems}, docum..

React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있습니다. 이렇게 하면 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링할 수 있습니다. React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작합니다. if 나 조건부 연산자 와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는 데에 사용하세요. 그러면 React는 현재 상태에 맞게 UI를 업데이트할 것입니다. function UserGreeting(props) { return Welcome back!; } function GuestGreeting(props) { return Please sign up.; } function Greeting(props) { const isLoggedIn =..

React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사합니다. 몇 가지 문법 차이는 다음과 같습니다. React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다. 예를 들어, HTML은 다음과 같습니다. Activate Lasers React에서는 약간 다릅니다. Activate Lasers 또 다른 차이점으로, React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault를 명시적으로 호출해야 합니다. 예를 들어, 일반 HTML에서는 새 페이지를 여는 링크의 기본 동작을 방지하기 위해 다음과 같은 코드를 작성합니다. Click..

function tick() { //props로 받은 게 없다 const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); ReactDOM.render( element, document.getElementById('root') ); } setInterval(tick, 1000); 이번 포스팅에서는 Clock컴포넌트를 완전히 재사용하고 캡슐화하는 방법을 배울 것입니다. 이 컴포넌트는 스스로 타이머를 설정할 것이고 매초 스스로 업데이트할 것입니다. function Clock(props) { return ( Hello, world! It is {props.date.toLocaleTimeString()}. ); } function tic..

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. !!! 리액트 엘리먼트를 반환한다!!! 1. 함수 컴포넌트와 클래스 컴포넌트 function Welcome(props) { return Hello, {props.name}; } 이 함수는 데이터를 가진 하나의 “props” (props는 속성을 나타내는 데이터입니다) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트입니다 class Welcome extends React.Component ..

엘리먼트는 React 앱의 가장 작은 단위입니다. 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 “루트(root)” DOM 노드라고 부릅니다.

const element = Hello, world!; 위는 JSX라 불리는, javascript를 확장한 문법입니다. 문자열도 아니고, HTML태그도 아닙니다. JSX라고 보시면 되겠습니다. 1. JSX란? "마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 '컴포넌트'라고 부르는 느슨하게 연결된 유닛으로..." (출처: https://ko.reactjs.org/docs/introducing-jsx.html) 2. JSX에 표현식 포함하기 const name = 'Josh Perez'; const element = Hello, {name}; ReactDOM.render( element, document.getElementById('root') ); function formatNam..