왜 다시 처음부터 공부하는지?
리액트가 뭐예요? 라고 질문이 들어오면 나는 답변을 제대로 할 수 있을까?
라는 의문점을 가지고 공부를 시작해봤다.
예전에 한번 훑었고, 개념 정리도 했으니 당연하게 답변 할 수 있을거라 했는데
그것은 오산.
스스로 부족함을 많이 느끼고 다시 개념 정리를 해보면서 확실하게 잡고 가려고 한다.
이번엔 어떤 것으로 공부하려는지?
이전엔 위코드에서 진행됐던 리액트 세션 위주로 공부했다면,
지금은 실전 리액트 프로그래밍과, 벨로퍼트 영상을 병행하며 공부해보려고 한다.
&& 공식문서 필수 포함!!
# 리액트란?
🎙 리액트가 뭐예요?
- 리액트는 페이스북이 만든 UI 라이브러리!
- 리액트는 UI 기능만 제공!
- 전역상태관리나,라우팅, 빌드 시스템은 각 개발자가 직접 구축해야한다.
하지만, 빌드를 직접 구축 해야하는 건 번거롭다는 단점이 있지만
리액트팀에서 CRA(Creat-react-app)를 만들어 제공하면서 단점을 보완시키고 있다.
🤼♀️ 답변을 해야할 땐
리액트는 페이스북이 만든 UI 라이브러리이고 빌드를 직접 구축해야하는 단점이 있지만,
CRA로 단점을 보완시킬 수 있습니다.
🎙 프레임워크 & 라이브러리를 왜 썼어요?
- UI를 자동으로 업데이트 해주기 때문!
UI = render(state)
우리는 API 통신이나,이벤트를 통해서 상태값을 변경시킨다
그래서 리액트가 변경된 상태값을 기반으로 UI를 자동으로 업데이트 된다.
리액트를 안쓸때 단점
- 브라우저의 돔을 직접 업데이트 해야한다. 하지만 간단하지 않다는 점
- 업데이트 코드를 잘 관리 하지 않으면 복잡도가 높아진다.
리액트를 쓸때 장점
- 가상 돔을 통해 UI를 빠르게 업데이트!
- 이전 UI 상태를 메모리에 유지시키고 변경 될 UI를 최소 집합을 계산한다.
- 불필요한 업데이트 ⬇️ 성능 ⬆️
가상돔이란? (virtual dom)
- 가상돔은 이전 UI 상태를 메모리에 유지해서 변경된 부분만 실제 돔에 반영한다.
리액트의 특징?
- 리액트는 함수형 프로그래밍을 적극 활용한다.
render 함수
- render 함수는 순수 함수로 작성!
- 랜덤 함수 사용 ❌
- 외부 상태 변경 ❌
순수함수란? 입력값이 같으면 출력값이 같다!
랜덤함수 or 날짜함수를 사용하게 되면 입력값이 같아도 출력값이 다르다.
render 함수 내부에서 외부상태를 변경하게 되면 다른 render 함수에 영향을 준다.
- state는 불변 변수로 관리!
불변변수로 관리?
어떤 객체를 수정할때는 새로운 객체를 만들어서 값을 할당해준다는 말!
순수함수와 불변변수를 사용하면 좋은점
코드의 복잡도 ⬇️ 버그가 발생할 확률⬇️ 랜더링 성능 ⬆️⬆️
🤼♀️ 답변을 해야할 땐
리액트는 UI를 자동으로 업데이트 시켜줍니다.
리액트를 사용하지 않으면 돔 업데이트를 직접 관리해서 간단하지않고 복잡도가 높아지게 됩니다.
반대로 리액트를 사용하게 되면 가상돔을 사용해서 UI를 빠르게 업데이트 시키고
불필요한 업데이트는 줄이면서 성능은 좋아지게 됩니다.
