분류 전체보기57 리액트 Props 정리 Props JSX 문법에서 컴포넌트를 작성할 때 컴포넌트에도 속성을 지정할 수 있는데요. 리액트에서 이렇게 컴포넌트에 지정한 속성들을 Props라고 부릅니다. Props는 Properties의 약자인데요. 컴포넌트에 속성을 지정해주면 각 속성이 하나의 객체로 모여서 컴포넌트를 정의한 함수의 첫 번째 파라미터로 전달됩니다. App.js import Dice from './Dice'; function App() { return ( ); } export default App; Dice.js import diceBlue01 from './assets/dice-blue-1.svg'; function Dice(props) { console.log(props) return ; } export default Dice;.. 2023. 11. 22. JSX 문법 설명 JSX란? JSX는 자바스크립트의 확장 문법인데요. 리액트로 코드를 작성할 때 HTML 문법과 비슷한 이 JSX 문법을 활용하면 훨씬 더 편리하게 화면에 나타낼 코드를 작성할 수가 있게 됩니다. import ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( 안녕 리액트! ); JSX 문법 JSX는 자바스크립트로 HTML과 같은 문법을 사용할 수 있도록 만들어주는 편리한 문법이지만, 그만큼 꼭 지켜야 할 규칙들도 있습니다. HTML과 다른 속성명 1. 속성명은 카멜 케이스로 작성하기! JSX 문법에서도 태그에 속성을 지정해 줄 수 있습니다. 단, 여러 단.. 2023. 11. 21. 비동기 실행 관련 3가지 문법 정리 비동기 실행의 정의는 아래와 같이 다양한 방식으로 표현될 수 있습니다. 특정 작업이 시작되고, 그 작업이 모두 완료되기 전에 바로 다음 코드가 실행되는 방식의 실행, 나머지 작업은 나중에 콜백을 통해 수행되는 방식의 실행 특정 처리를 나중으로 미루는 방식의 실행 콜백을 등록해두고, 추후에 특정 조건이 만족되면 그 콜백으로 나머지 작업을 수행하는 방식의 실행 이렇게 다양한 표현으로 그 정의를 써볼 수 있는데요. 특정 처리를 담당하는 존재(콜백)의 실행을 나중으로 미룬다는 점만 잘 기억하시면 딱히 어려울 게 없습니다. 비동기 실행 관련 문법 중 3가지 (1) 파라미터로 바로 콜백을 전달하는 형태의 전통적인 비동기 실행 함수 (2) Promise (3) async/await 에 대해 정리하겠습니다. 1. 파라.. 2023. 11. 16. 비동기 실행의 개념과 관련 함수들 비동기 실행의 개념에 대해 알아보겠습니다. console.log('Start!'); fetch('https://www.google.com') .then((response) => response.text()) .then((result) => { console.log(result); }); console.log('End'); 지금 이 코드에는 다음과 같은 2개의 콜백이 있습니다. (1) (response) ⇒ response.text() (2) (result) ⇒ { console.log(result); } fetch 함수가 리퀘스트를 보내고, 서버의 리스폰스를 받게 되면 그때서야 이 콜백들이 순서대로 실행되는데요. 이 사실을 바탕으로, 전체 코드의 실행 순서를 다시 정리하자면 console.log('Sta.. 2023. 11. 15. 이전 1 2 3 4 5 6 7 ··· 15 다음
