Jinju's Development Blog

이벤트 처리하기// Button.jsxconst Button = ({ text, color, children }) => { // 이벤트 객체 const onClickButton = () => { console.log(text); }; return ( {text} - {color.toUpperCase()} {children} );};Button.defaultProps = { color: "black",};export default Button;  버튼을 클릭하거나 마우스를 갖다대는 등의 이벤트를 처리하는 '이벤트 핸들링'을 배웠다.  button 태그 내부에 이벤트 이름을 입력하고, 화살표 함수 ()=>{} 를 중괄호 안에 넣어주는 방법이 있다. 만약 내부 ..

- React.js는 어떤 기술이며 왜 활용되나요?  리액트는 자바스크립트 라이브러리이다. 브라우저의 UI 작업을 처리하며, 이를 유용하게 해주는 도구들의 묶음인 라이브러리는 npm i 또는 npm install 명령어를 이용해서 쉽게 다운로드 할 수 있다. 리액트 앱을 만드는데 필요한 기본적인 도구들은 vite(프론트엔드 빌드 도구)를 사용해 쉽게 가져올 수 있다. - React App은 어떻게 생성할 수 있나요?  먼저 패키지를 생성해야 한다. vite를 이용한다면 npm create vite@latest 명령어를 입력한다. 패키지 이름과 기본 설정들을 선택하면 폴더, 즉 패키지가 생성된다. 해당 폴더에 들어간 뒤 터미널에 npm i 를 입력해 라이브러리를 다운로드 해준다. - React App은 어..

동기와 비동기console.log(1);setTimeout(() => { console.log(2);}, 3000);console.log(3);  동기란 순서대로 작업을 하나씩 처리하는 것을 말한다. 이렇게 동기적으로 작업을 처리해주는 아이가 스레드인데, 자바스크립트에는 스레드가 하나뿐이다. 그렇다면 동시에 여러 작업을 처리할 수 없는 것일까? 그렇지 않다. 실행된 작업을 브라우저 영역의 기능인 Browser APIs에게 위탁하고, 그동안 다음 작업을 실행하는 방법인 비동기가 있다. 예시 코드를 보자. 자바스크립트는 setTimeout 함수를 만나면 브라우저 APIs가 타이머를 실행하도록 하고, 그동안 다음 작업을 수행한다. 그리고 3초가 지나면 첫 번째 인자인 콜백함수를 그때서야 실행한다. 로그에는 ..