- 모의 기술면접에 대한 질문과 답변 정리
Promise의 기능과 필요한 이유에 대해 설명해주세요
나의 답변
- 우선 Promise는 자바스크립트의 비동기처리를 담당하는 객체입니다
- 이 프로미스를 설명 드리기 전에 프로미스가 나오기 이전에 비동기처리가 어떤식으로 진행이되었는지를 알아야 해당 부분에 명확한 답을 드릴수있을것 같은데요
- 프로미스가 나오기 이전에는 콜백패턴으로 비동기 처리를 진행 했습니다 하지만 이 콜백 패턴에 단점이 나오는데 바로 오류 핸들링이 힘들다는것과 모두 아실것 같은 콜백 지옥이 생성되게 됩니다
- 그래서 프로미스는 여느 개발트랜드와 다르지 않게 이전에 것에 불편한점을 개선한 결과물 인데요 그래서 프로미스의 기능들은 비동기처리가 성공했을때와 성공하지 않았을때를 resolve와 reject값으로 핸들링 할 수 있게 됩니다
- 그리고 프로미스는 콜백과는 다르게 결과를 값으로 받아서 저장해서 사용 할 수 있다는 장점으 가지고 있어서 값을 반환만 하면 되기때문에 콜백함수를 따로 받을 필요가 없게 되고 연속적 사용은 then을 이용해서 연속으로 사용이 가능하기때문에 콜백보다 더 가독성 있는 코드로 작성 할 수 있게 된다는 장점이 있습니다.
💡 꼬리 질문 예상
- async와 await를 사용하는 이유
이부분도 위에 말씀드린 개발 트랜드처럼 이전에 있는 프로미스의 단점들을 보안한 문법입니다
콜백지옥이나 프로미스같은 경우도 여러개의 프로미스가 서로를 의존하고있는 경우에는 코드 가독성이 떨어집니다- 그래서 이문제를 쉽게 해결하기위해 async와 await가 사용 됩니다
async 메서드 안에서는 await를 사용하게는데 이걸 실생활 예로 들어보면 친구에게 물건을 가져다 주기로 약속을 했는데 약속만하고 이행을 하려면 몸을 움직여야 하게 됩니다- 여기서 약속은 프로미스 이행은 프로미스 실행을 이야기 합니다 이행되지 않은 약속은 pending상태를 의미하구요
- 하지만 여기서 await를 사용하게되면 그 물건을 가져다 주기까지 기다리게 됩니다 기다린 후에 물건을 가져다주게 되면 약속이 이행된 상태가 됩니다
- 쉽게말하면 프로미스가 이행되고 값이 넘어올때까지 기다린다는걸 await로 표시해주게 되는겁니다
순수함수란 무엇이고 불변성과 사이드 이펙트와 연결해서 설명해주세요
나의답변
- 순수함수는 사이드 이펙트가 없고 인풋을 넣었을때 아웃풋이 항상 같고 변치않는 불변성을 가진 함수를 말합니다
- 예를들면 500원을 넣었을때 여러가지의 결과가 나오는 뽑기기계를 함수로 빗대어보면 순수함수가 아닌거고
- 1000원을 넣어서 내가원하는 음료를 선택해서 마시는 자판기를 함수로 빗대어보면 순수함수 일 수 있습니다.
- 하지만 기대한 값과 다른결과가 나오게 될경우에는 이 다른 결과에 의해 예측 불가능한 에러가 발생되게 됩니다
- 대부분의 함수의 변형은 사이드 이펙트에 의해서 발생하게 되는데 함수의 인풋과 아웃풋에 관련된 작업 외에는 모두 사이드이팩트라고 볼 수 있습니다.
- 예를들면 반복문이나 재선언이나 재할당 리턴이 없는함수 등등 많은 것들이 있지만 위에서 말씀 드린대로 예측 가능한 에러가 다른 결과값으로 인해서 발생되게 된다면 해결하기 힘든 상황이 발생되기 때문에 이를 사전에 방지하기 위해서 순수함수라는 개념을 많이 사용하게 되었습니다.
React의 state와 props에 대해서 설명해주세요
나의답변
- useState는 React에서 제공하는 Hook입니다
- 기본적으로 useState는 배열을 return 해주는 하나의 함수 형태이고 상태값과 상태값을 핸들링 해줄수있는 set 함수와 useState(default)값을 설정해주는 형태입니다
- 그리고 Props는 상위 컴포넌트가 하위 컴포넌트에 값을 단방향 데이터로 전달할때 사용하고 수정 할 수 없다는 특징이 있습니다
둘의차이점
- 우선 둘의 차이점을 말씀 드리기전에 공통되는 부분을 먼저 짚고 넘어가면 더 설명이 좋을것 같습니다
- 둘의 공통점은 일반적인 JS객체라고 볼 수 있습니다 그리고 두객체는 모두 랜더링에 영향을 주는 정보들을 담고있고 모두 render update의 변화를 toggle하는 성질을 가지고 있습니다
- 그럼 이제 차이점을 말씀 드리면 props는 컴포넌트 위에서 수신이 되고 컴포넌트는 props의 값을 변경 할 수없습니다 다만 자식 Component의 props값은 부모에 의해 변경은 가능합니다
- 그리고 State는 구성요소가 마운트 될때 디폴트 값으로 시작하게 되고 다음 코드의 진행에 따라서 상태값에 변화가 일어납니다 여기서 진행은 대부분 이벤트로 발생이 되는 경우가 많습니다
- 그리고 컴포넌트는 내부적으로 자신의 상태를 관리하지만 초기상태 설정 외에는 자식의 상태를 다루지는 않는데 그렇기때문에 state를 통해서 상태값들을 변경 할 수 있게 만들어 줍니다
- 간결하게 정리 해드리면 props는 부모가 자식component의 값을 변경 할 수 있지만 state는 불가능하고
- props는 자식 구성요소의 값이 변경이 가능하고 state는 불가능 합니다 그래서 이 상황에 맞춰서 props와 state를 구분해서 사용하는게 좋습니다
응애🐣 예비 개발자 입니다.