React

사용자 인터페이스를 만들기 위한 JS라이브러리이다.


component : react에서 서비스를 개발하는데 있어 독립적인 단위로 쪼개서 구현한다.
virtual dom : 가상적인 표현을 메모리에 저장하고 reactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍개념이다.
JSX : JS내에서 UI를 작성하기 위해 개발자에게 익순한 환경을 제공하며 HTML과 유사하다.

SPA란?

🔍Single Page Apllication
=> 최초에 서버로부터 HTML을 전달 받고 페이지의 변경이 필요할 때 변경이 필요한 부분을 JSON으로 전달 받습니다.
이때 페이지에서 변경된 부분만 계산해 다시 그리게 된다.
즉, 리로드하지 않고 바뀌어야할 부분만 바뀌게된다.

왜 react를 배우면 좋나요?

생산성/재사용성 : component와 hook을 활용해서 생산성과 코드의 재사용성을 높인다.
풍부한 자료, 라이브러리 : 오픈소스 라이브러리 등이 공유되고 있다.
다양한 사용처 : react-native나 ios애플리케이션을 사용할 수 있다.

Array(forEach)

✔️ Array.forEach는 배열의 요소를 이용해 순차적으로 함수를 실행하는 메서드입니다.
✔️Array.forEach에 실행할 콜백 함수는 현재 값, 인덱스, forEach를 호출한 배열을 매개변수로 받습니다. 또한 함수 내에서 따로 return할 필요가 없습니다.

Array(Map)

✔️ Array.map은 배열의 요소를 이용해 순차적으로 함수를 실행해 새로운 배열을 반환하는 메서드
✔️ Array.map에 실행할 콜백 함수는 현재 값, 인덱스 map을 호출한 배열을 매개변수로 받습니다. 함수내에서 반드시 새로운 값을 return해야함

Array(Filter)

✔️Array.filter는 배열의 요소를 이용해 순차적으로 함수를 실행해 조건을 통과하는 요소를 모아 새로운 배열로 반환하는 메서드
✔️ Array.filter에 실행할 콜백 함수는 현재 값, 인덱스, map을 호출한 배열을 매개변수로 받는다.
함수내에서 false를 return할 경우 새로운 배열에서 제외하고 true를 return할 경우 새로운 배열에 추가된다.

Destructuring assignMent(Object) 구조 분해 할당

객체나 배열을 해체하여 개별 변수에 담을 수 있게하는 표현식이다. 코드를 간결하게 작성할 수 있다.

Shorthand property names 단축 속성명

단축속성명을 이용해 새로운 객체 선언을 간편하게 할 수 있다. 새로 선언하는 object에 key값과 동일한 변수명을 가진 변수를 할당할 경우 value값을 생략해서 적을 수 있다.

Spread Syntax(배열) 전개구문

array나 object를 전개할 때 사용한다. 기본적으로 배열이나 객체에 ...을 붙여 사용한다. 함수 호출 및 선언, 배열 선언, 객체 선언 시 다양하게 활용 가능하다.
배열을 합성할 때 사용 가능하고 배열이나 객체를 복제할 때 사용 가능하다.

Optional chaining

Optional chaining 연산자는 객체나 변수에 연결된 다른 속성 참조할 때 유효한 속성인 지 검사하지 않고 값을 읽을 수 있도록 해줍니다. 만약 유효한 속성이 아닐 경우 에러를 발생시키지 않고 ‘undefined’를 반환
배열의 경우 array?.[index]와 같이 사용할 수 있다.