React란, 무엇일까 키워드
- SPA가 뭔가
- Single page application으로 정적 리소스를 처음에 한번 다운로드한다. 이후 페이지 간 이동 시 필요한 데이터만을 JSON 형태로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 줄여 페이지 이동 시 속도 측면에서 좋은 사용자 경험을 보여준다. 하지만 초기 구동 속도가 느리다는 단점과 클라이언트에서 모든 파일을 다운로드 받아 SEO에도 불리하다는 단점이 존재합니다. ( 그렇지만 React기반 프레임워크인 Next.js 같은 기술을 바탕으로 서버 사이드 렌더링을 지원해 SEO를 해결할 수 있습니다. )
- JSX는 뭔가
- JavaScript의 확장 문법으로 X는 XML을 뜻합니다. 자바스크립트를 html 처럼 표현할 수 있어 컴포넌트 구조화를 더욱 편리하게 작성할 수 있습니다.
- 해당 파일은 브라우저가 동작하기 전 바벨을 통해 자바스크립트 형태의 코드로 변환해줍니다 DOM 트리 구조를 생성합니다.
- 가상 돔에서 컴포넌트 변화를 감지할 때 효율적으로 감지하기 위해 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있어 컴포넌트 최상위 태그는 하나의 태그만으로 만들어야 한다. ( 이 과정에서 fragment 태그를 이용해 하나의 태그로 감싸줄 수 있다 의미 없는 빈 태그로도 가능 → map 등 key값이 필요한 경우는 fragment 그게 아니라면 빈 태그 )
- State와 Props의 차이
- prop은 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터고 읽기 전용입니다. ( 생명주기 동안은 수정할 수 없습니다. ) State는 컴포넌트 생명주기 동안 수정이 될 수 있는 데이터이며 수정이 가능한 쓰기 전용으로 볼 수 있습니다.
- React component LifeCycle
React 를 시작하기전에 키워드
- ES6란 무엇인가요?
- ECMAScript의 약자이며 자바스크립트 표준을 나타내는 용어이며 6은 2015년에 출시되었습니다. 기존 재할당, 재선언이 모두 가능해 호이스팅이 일어나는 과정에서 오류 포착이 어려웠던 var 키워드가 아닌 보다 예측할 수 있는 let, const 문법이 생겼습니다.
- 템플릿 리터럴을 통해 문자열에 ${}를 통해 자바스크립트 표현식을 사용할 수 있습니다.
- 현재 강의에 나오는 화살표 함수도 ES6 이후에 생겨난 함수 표현식입니다. 익명 함수로 사용이 가능하고 자신만의 this를 생성하지 않고 자신을 포함하고 있는 context의 this를 이어받아 생성자로는 사용할 수 없지만 코드가 보다 간결하게 사용이 가능하다는 장점이 있습니다.
- 값을 해제해 변수 새로 할당이 가능한 구조 분해 할당을 통해 코드 가독성을 증가시킬 수 있습니다.
- 스프레드 연산자를 통해 Object를 복사해 활용도를 높일 수 있습니다.
- 자바스크립트 메서드는 무엇이 있나요?
- setTimeout ( 지정된 시간 후 함수를 한번 실행 )
- setInterval ( 지정된 시간마다 함수를 반복 실행 )
- clearTimeout, clearInterval ( setTimeout, setInterval 함수 중지 )
- encodeURL, decodeURL ( 인코딩 디코딩으로 URL 일부 특수문자 제외 )
- String, Number ( 타입 변환 함수 )
- Array 객체 ( map, filter, reduce, forEach, slice, splice … )
- 함수 선언식, 표현식 차이 점 직접 보여주기
- 함수 선언식은 함수 전체를 호이스팅 합니다 , 표현식은 호이스팅이 일어나지 않음 해당 문법에 도달했을 때 실행됨 함수 표현식을 사용하면
- 함수를 변수화시킬 수 있기 때문에 함수의 객체를 쉽게 변수로 나타내어 리턴할 수 있다는 장점을 가지고 있다. 이를 통해 클로저, 콜백함수 구현이 쉽게 가능하다.
- https://velog.io/@turtle601/자바스크립트-스코프와-클로저
React 초기 설정 키워드
- yarn과 npm의 차이점은 무엇인가?
- 자바스크립트 런타임 환경인 노드의 패키지 관리자입니다. 프로세스 처리 방법의 차이가 있습니다. npm은 한 번에 하나씩 순차적으로 설치하고 yarn은 동시에 가져오고 설치하도록 최적화되어 패키지 설치 속도는 yarn이 더 빠릅니다. yarn이 보안성 역시 npm보다 뛰어납니다. ( yarn.lock )
- yarn 명령어는 어떤 것이 더 있을까?
- add ( 설치 )
- init ( package.json 생성 )
- remove ( 삭제 )
- update ( 현재 패키지 업데이트 )
Create React App 키워드
- gitbash, power shell, mac terminal 명령어
- 폴더 이동하기
- 폴더 구조 확인하기
- cd ( 폴더 이동 )
- mkdir ( 폴더 생성 )
- ls ( 현재 디렉토리 폴더 전체 보기 )
- code . ( 현재 디렉토리 폴더 코드 열기 )
- 반드시 CRA를 써야만 리액트 프로젝트를 생성할 수 있는 것일까?
- 가능합니다. 하지만 초기 세팅을 위해 WebPack, babel 설정과, DOM render 설정, 동작에 필요한 package.json과 패키지가 설치 방법을 알아야 합니다.
- https://velog.io/@kmlee95/CRA없이-React환경-구축하기
- VSCode를 보다 쉽게 사용할 수 있는 extends 추천해주기
- Auto Rename Tag
- Community Material Theme
- ESLint
- indent-rainbow
- korean language Pack for visual studio code
- Material icon theme
- Material theme
- Prettier - code formatter
- React extension pack, code snippets
- vscode-styled-components
Component part 1 키워드
- 클래스 컴포넌트는 무엇이고, 함수 컴포넌트와 무엇이 다른가?
- 여러 단계의 상속으로 이루어져 있어 복잡성이 높았던 반면에 함수형 컴포넌트는 기존 클래스 컴포넌트의 생명주기를 hook을 사용해 원하는 동작을 보다 쉽게 작업이 가능해 복잡성을 줄이고 재사용성 역시 뛰어난 상황을 만들 수 있었습니다
- React 생명주기
- Mount
- constructor 클래스 생성자 메서드 setState 사용 불가 DOM 접근이 불가능한 상태
- render UI를 렌더링하는 메서드
- componentDidMount 첫 렌더링이 마친 후 호출하는 메서드 setState, 비동기 작업을 이곳에서 호출한다
- Update
- render 컴포넌트 리렌더링
- componentWillUnmount 컴포넌트를 DOM에서 제거할 때 실행 리렌더링이 되지 않으므로 setState 호출 불가
- 함수형 컴포넌트 React hook
- useState initialState인 state 값과 state를 갱신할 때 사용하는 setState를 가지고 있으며 setState가 실행되면 리렌더링이 일어나면서 initialState 값이 재 생성되는 것이 아닌 이 값은 무시하고 새롭게 갱신된 state 값을 가진다
- useEffect 최초 렌더링은 DidMount ,state 값이 변경되어 리렌더링이 일어나는 경우 ( 의존성 배열에 적합한 상태인 경우 ) DidUpdate, return 값으로 DOM을 제거할 때 componentWillUnmount
- 화면 업데이트가 되기 전 호출하고 싶으면 useLayoutEffect로 실행하기
Component part 2 키워드
- 리액트에서 렌더링이란 무엇인가?
- 렌더링이란 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정이다
- https://velog.io/@himprover/최신-Chrome-브라우저-렌더링-방식을-알아보자
- 엘리먼트 1개만 반환하는 fragment 태그 방법
- 태그 활용하기
- <> 빈태그 활용하기
- 의미 없는 부모 태그 생성을 원하면 빈 태그 map 함수를 사용해 각 컴포넌트의 순서가 필요한 경우 ( ex. key index ) fragment 사용하기
프론트엔드 개발자 김찰리