본문 바로가기

Front-End30

[ React ] React 입문 ④ Props [ Props ] state( 상태 ) : 컴포넌트가 가지는 동적인 데이터 Props : 컴포넌트에 데이터를 전달하는 방법 count의 초기 값을 App 컴포넌트에서 Counter 컴포넌트에게 전달하는 값으로 사용해야할 경우 Props 기능을 사용해야한다. → 부모 컴포넌트에서 자식 컴포넌트에게 initialValue라는 값을 전달할 수 있음 App.js import './App.css'; import Counter from './Count'; import React from 'react'; function App() { return ( +를 누르면 1 증가, -를 누르면 1 감소 ); } export default App; 즉, 부모 컴포넌트에서 자식 컴포넌트에게 어떤 값을 이름을 붙여서 전달하는 방식.. 2022. 9. 17.
[ React ] React 입문 ③ State [ State( 상태 ) ] state : 계속해서 변환하는 특정 상태, 상태에 따라 각각 다른 동작을 한다. 컴포넌트가 상태라는 테마를 갖고 사용자는 스위치 같은 요소를 통해 상태를 변화시킬 수 있다. 리액트에서의 state는 컴포넌트가 가진 테마처럼 계속해서 값이 바뀔 수 있는 동적인 데이터이고 상태를 변경하는 등의 권리는 상태를 가진 컴포넌트가 직접 관리하게 된다. state는 리액트의 기능이기 때문에 리액트를 import 해줘야한다. 또한 useState라는 상태를 사용하겠다는 메소드를 추가적으로 import 해줘야한다. import React,{useState} from 'react'; App.js import './App.css'; import Counter from './Count'; fun.. 2022. 9. 17.
[ React ] React 입문 ② JSX [ JSX ] JSX : 자바스크립트의 확장 문법이자 자바스크립트와 HTML을 혼합해서 사용할 수 있는 리액트에서 주로 사용하는 표현식 공통적으로 사용해야하는 요소들을 리액트에서는 컴포넌트로 분할해서 재사용할 수 있다. JSX는 컴포넌트를 만드는데 유용하게 사용되는 문법이다. * 리액트 시작 명령어 : npm start 리액트는 보통 자바스크립트 기반으로 동작하기 때문에 확장자를 js로 해서 만들어주면 된다. App.js 컴포넌트가 자식으로 포함하고 있지 않은 컴포넌트들은 화면에 나타나지 않는다. → index.js에서 아이디가 root인 요소를 찾고 그 요소에다가 App이라는 컴포넌트를 불러와서 랜더를 하기 때문에 결론적으로 App 컴포넌트가 최상위 부모가 되고 그 부모가 포함하지 않은 자식 요소는 화.. 2022. 9. 17.
[ React ] React 입문 ① [ React가 필요한 이유 ] 1. 다른 페이지에서도 공통적으로 사용되는 것이 예상되는 요소들을 별도의 파일이나 모듈로 제작해놓고 컴포넌트 형식으로 각각 필요한 파일마다 불러다 사용하는 방식이 페이지를 추가적으로 만들어야하는 상황에서 타이핑하는 코드가 확연하게 줄어든다. 공통적으로 다른 페이지에서도 사용이 되기 때문에 재사용 되어야하는 요소들을 컴포넌트로 만들어서 사용하는 방식을 컴포넌트화 방식이라 한다. 컴포넌트화 방식은 컴포넌트가 정의된 파일 하나만 수정하게 되면 그 컴포넌트를 불러다 쓰는 다른 페이지들은 자동적으로 수정이 된다. 즉, 컴포넌트에 오류가 있거나 수정해야하는 상황이 생겼을 때 대처하기가 수월해지고 쉬워지기 때문에 유지보수하기 쉬워진다. 기존 HTML으로만 사용했던 방식은 요소들을 컴포.. 2022. 9. 13.
[ React ] Node.js [ React.js의 기본 환경 Node.js ] 자바스크립트 코드는 브라우저 내장 자바스크립트 엔진을 이용하여 실행하게 된다. 브라우저는 각각 자신만의 엔진을 보유하고 있음 ex) Micro Edge - Chakra 크롬 브라우저의 V8엔진이 가장 대표적인 자바스크립트 엔진이다. 브라우저는 HTML 문서를 기반으로 동작하므로 자바스크립트를 HTML 문서 내부에서만 사용했었지만 크롬의 V8 엔진은 C++를 기반으로 만들어졌기 때문에 HTML 문서 내부 뿐만 아닌 외부에서도 사용이 가능해진다. Node.js는 V8 엔진을 이용해서 자바스크립트를 브라우저 뿐만 아닌 어디에서든 사용가능하게 해준다. 즉, Node.js는 자바스크립트 실행 환경이 된다. ▶Javascript's Runtime 자바스크립트가 브라.. 2022. 9. 13.
[ JavaScript ] 자바스크립트 응용 ③ [ promise, 콜백 지옥 ] 콜백 지옥 : 연속되는 비동기 함수들을 처리할 때 비동기 처리의 결과 값을 사용하기 위해 콜백이 깊어지는 현상 콜백 지옥을 해결하기 위해서 promise 객체를 사용하게 되면은 비동기 처리 함수에 콜백을 줄지어 전달하지 않아도 된다. 비동기 작업 : 먼저 지시된 작업이 종료될 때 까지 기다리지 않고 다음 작업을 실행하는 방식 1. Pending( 대기 상태 ) : 비동기 작업이 진행 중이거나 작업이 시작할 수 없는 문제가 발생했음 2. Fulfilled( 성공 ) : 비동기 작업이 의도대로 정상적으로 동작된 상태 3. Rejected( 실패 ) : 비동기 작업이 모종의 이유로 인해 실패한 상태 ex) 서버 미응답, 시간 초.. 2022. 9. 12.
[ JavaScript ] 자바스크립트 응용 ② [ 동기 & 비동기 ] 자바 스크립트는 코드가 작성된 순서대로 작업을 처리한다. 이전 작업이 진행 중 일 경우 다음 작업을 수행하지 않고 기다린다. 즉, 먼저 작성된 코드를 먼저 다 실행한 후에 뒤에 작성된 코드를 실행하는 방식을 동기적 방식이라 한다. 또한 이전 작업이 수행 중일 때 다른 작업을 동시에 할 수 없는 것을 블로킹 방식이라 한다. * 쓰레드 : 연산 과정을 수행하는 것 동기 처리 방식의 단점은 하나의 작업이 너무 오래 걸릴 경우 모든 작업이 오래 걸리게 되고, 하나의 작업이 종료되기 전까지 다른 작업들이 올 스탑되기 때문에 전반적인 흐름이 느려진다. 코드를 실행하는 쓰레드를 여러 개 사용하는 방식인 MultiThread.. 2022. 8. 31.
[ JavaScript ] 자바스크립트 응용 ① [ Truthy & Falsy ] let a = "chaechae"; if( a ){ console.log("True") }else{ console.log("False"); } //True 자바스크립트의 조건식에는 Boolean 타입을 적어주지 않아도 참과 거짓을 구분할 수 있는 성질이 있다. Truthy : 배열, 객체, 숫자 값, 문자열, Infinity * 빈 배열, 빈 객체도 포함 Falsy : null, undefined, 0, Nan, ""( 빈 문자열 ) 함수의 파라미터로 전달받은 인자가 객체인지 혹은 undefined / null이 아닌지 판단해야할 경우 Truthy와 Falsy를 이용할 수 있다. const getName = (person) =>{ if( person === undefin.. 2022. 8. 27.
[ JavaScript ] 자바스크립트 기본 ④ [ 배열 ] 배열은 객체와 함수처럼 Non-Primitive Data Type에 해당한다. * Non-Primitive Data Type : 여러 개의 고정되지 않는 동적 공간을 사용하여 한번에 여러 개의 값을 가질 수 있다. 배열 : 순서있는 요소들의 집합, 여러 개의 항목이 들어있는 리스트 1. 배열 생성하기 let arr1 = new Array(); let arr2 = []; // 배열 리터럴 배열은 객체와 마찬가지로 []안에 들어가는 값이 아무 자료형이나 들어가도 상관이 없다. let arr = [ 1, "@", true, null, undefined, {}, [], function(){} ]; console.log(arr); // [ 1, '@', true, null, undefined, {},.. 2022. 8. 25.

티스토리툴바