4전 4전

const element = Hello, world; 위 코드와 같은 문법은 문자열도 아니고 HTML도 아닌 JSX문법이라고 합니다. JSX는 JavaScript XML로 JavaScript에 XML을 확장한 문법입니다. 리액트에서 UI를 나타내기 위해서 사용이 됩니다. | JSX사용 1. JSX에 변수 넣기 변수를 넣으려면 변수를 중괄호로 감싼 다음 JSX안에서 사용하면 됩니다. const name = "LEE"; const element = Hello, {name}; 2. 태그 속성 따옴표를 이용해 문자열 값을 넣을 수 있습니다. const element = 링크; 중괄호를 사용해 자바스크립트 표현식을 넣을 수 있습니다. const element = ; 3. class 지정 일반 HTML과 다르게 c..

| 리액트 프로젝트 생성 1. npm 설치 확인 리액트 프로젝트를 생성하려면 먼저 npm이 설치되어 있어야 하기 때문에 먼저 npm -v 명령어를 사용해서 설치여부와 버전을 확인해줘야 합니다. 2. 프로젝트 폴더 만들기 터미널에 npx create-react-app을 치고 프로젝트 폴더 명을 치면 리액트 프로젝트가 생성이 됩니다. 3. 프로젝트 열기 먼저 생성한 리액트 폴더로 이동해 줍니다. 그리고 터미널에 npm start 를 입력해 주면 리액트 앱이 실행됩니다.

리액트는 페이스북에서 만든 사용자 인터페이스를 구축하는 데 사용되는 오픈소스 자바스크립트 라이브러리입니다. | 리액트의 특징 리액트는 UI를 컴포넌트(Components) 별로 분해하여 작동합니다. 이 컴포넌트는 복잡한 UI를 만들기 위해 서로 결합할 수 있는 각각의 코드 조각입니다. 이런 컴포넌트는 자바스크립트로 작성할 수 있고 여러 페이지에서 재사용이 가능합니다. | 리액트 사용 이유 리액트는 여러 프로젝트에서 사용할 수 있는 재사용가능한 컴포넌트를 사용하시 때문에 시간과 노력을 아낄 수 있고 유지 보수가 편하다는 장점이 있습니다. 리액트는 virtaul DOM을 사용해서 기존 방법보다 빠르고 효율이 좋다고 합니다. 리액트는 다른 프레임워크나 라이브러리와 같이 사용할 수 있어서 다양한 프로젝트에 유연..

자바스크립트에서 Array나 Object 자료형에 있는 데이터를 쉽게 꺼내고 싶을 때 destructuring 문법을 사용하면 쉽게 할 수 있습니다. | 사용 1. Array 안에 있는 데이터를 변수에 담기 let [a, b, c] = [1, 2, 3]; console.log(a, b, c); // 1 2 3 출력 이런 식으로 사용하면 각 변수에 배열 데이터가 담깁니다. 또한 기본값을 지정할 수도 있습니다. let [a, b, c = 3] = [1, 2]; console.log(a, b, c); // 1 2 3 출력 2. Object 안에 있는 데이터를 변수에 담기 let data = { info: { name: '4전', age: 25, address: { city: 'New York', state: ..

자바스크립트에서 async/await는 코드의 비동기처리를 도와줍니다. 콜백함수와 promise도 비동기 처리를 도와주지만 async/await를 사용하여 좀 다른 방식으로 구현할 수 있습니다. | 사용 1. async 사용하기 위해서 함수 앞에 async 키워드를 넣어줘야 합니다. 그럼 그 함수는 항상 promise를 반환해서 then()을 이용해 실행시킬 수 있습니다. async function 함수() { return 1; } 함수().then((result)=>{ console.log(result) }) // 1출력 2. await await는 async함수 내부에서만 사용할 수 있는데 promise앞에 써주면 해당 promise의 작동이 끝날 때까지 기다린 다음에 다음 코드를 실행해 줍니다. a..

자바스크립트에서 promise는 비동기작업을 쉽게 할 수 있게 도와주는 기능입니다. 콜백함수로 비동기 처리를 할 수 있지만 작업이 많으면 코드가 복잡해지기 때문에 Promise를 사용할 수 있습니다. | 사용 먼저 Promise를 만들려면 new Promise() 문법으로 변수 오브젝트를 하나 생성하면 됩니다. let 프로미스 = new Promise(function(resolve, reject){ }); 프로미스.then(function(){ }).catch(function(){ }) 이런 식으로 사용하면 되는데 이때 프로미스 안의 코드가 실행(resoleve)되면 then() 안에 있는 코드를 실행시켜 고, 또한 코드 실행이 실패(reject)하면 catch() 안에 있는 코드를 실행시켜 줍니다. /..

자바스크립트에서 객체나 배열 등의 데이터 구조를 복사할 때 얇은 복사와 깊은 복사 두 가지 방법이 있습니다. | 얇은 복사(Shallow Copy) 얇은 복사는 해당 객체나 배열의 참조값(메모리 주소)만 복사하는 방법입니다. 이 경우에는 원본 객체와 복사된 객체가 같은 참조값(메모리 주소)을 가지고 있어서 복사된 객체를 변경하면 원본의 객체도 같이 변경이 돼서 주의해야 합니다. 1. 방법 (1) Object.assign() 사용 Object.assign() 첫 번째 인수로 전달된 객체에 다른 객체들의 속성을 복사하는 메서드입니다. 첫 번째 인자로 빈 객체를 전달해 주고 두 번째 인자에는 복사할 객체를 넣어주면 되고, 이때 중첩돼 있는 객체의 값은 원본 객채와 같은 참조값을 가리킵니다. let obj1 =..

동기식 처리는 코드가 한 번에 한 줄씩 차례로 실행되는 것을 말하고 비동기식 처리는 코드가 병렬적으로 한 번에 실행되는 것을 말합니다. | 자바스크립트가 작동하는 방식 1. 동기식 처리 자바스크립트에서는 코드가 동기식으로 작동합니다. 웹 브라우저에는 stack이라는 코드를 실행해 주는 공간이 있는데 거기에서 코드를 한 줄씩 차례로 실행해 주는 거입니다. 예를 들면 console.log(1); console.log(2); console.log(3); 이런 식으로 코드를 작성하면 자바스크립트는 동기적으로 작동하기 때문에 콘솔에 차례대로 1, 2, 3이 출력이 됩니다. 2. 비동기식 처리 자바스크립트에서 코드를 비동기식으로 처리하는 경우도 있는데 이는 setTimeout(), addEventlistener()..