리액트 공부를 시작할 때 참고해야 할 질문 모음

1. 리액트 공부 어떻게 하면 좋을까요

프론트엔드로 개발자가 되고 싶은 전공생인데 리액트 입문을 어떻게 하면 좋을지 추천받고 싶습니다

답변

안녕하세요! 질문자님이 전공생이라고 하셨으므로 기본적인 Computer Science 지식은 있다고 가정하고 이야기 해 보도록 하겠습니다. 1. HTML, CSS, JavaScript를 책이나 공식 문서(ex. Mozilla, W3C 등)를 보면서 기본적인 개념을 공부한다. 2. 1번에서 공부한 내용을 바탕으로 라이브러리 없이 HTML, CSS, JavaScript로 간단한(1000 라인 이내) 어플리케이션을 만들어 본다. (주제는 자유. 정 생각나는게 없으면 Todo List나 계산기) 3. 리액트 책이나 강의 하나를 정해서 붙잡고 개념을 공부해 본다. 4. 자주 사용하는 서비스를 하나 리액트로 클론 코딩 해본다. (ex. 페이스북, 에어비앤비, 인스타그램) 5. 4번까지 해서 기본적인 리액트를 이해했으면 이제 API fetch 라이브러리(react query, swr 등), 비동기 처리(Promise, async/await 등), 상태 관리(redux, recoil 등), CSS-in-JS(styled-components, emotion 등) 등 리액트와 같이 사용할 수 있는 것들을 하나씩 공부하면서 왜 이런 것들이 필요한지 이해한다. 6. 5번에서 배운 것들을 바탕으로 직접 기획해서 나만의 서비스를 하나 만들어 본다. 6번까지 하면 아마 그 이후로는 무엇을 어떻게 공부해야 할지가 보일 것이고, 신입 개발자로 취업을 해서 일을 할 수 있는 수준이 될 것으로 보입니다.

2. 리액트 경험이 없는 프론트앤드 신입 취업준비생의 고민입니다,,

안녕하세요 제목과 같이 리액트 경험이 없는 신입 프론트앤드 개발자 취업준비생입니다 국비 백엔드 수업을 들었고(국비는 프론트 과정이 생각보다 정말 없더라구요) 애초에 프론트앤드쪽으로 진로를 정했지만 여건상 자바,스프링프레임워크,제이쿼리,자스 등을 이용한 파이널 프로젝트를 1개 진행했습니다. 요즘 공고를 보니 리액트는 거의 필수 요건으로 들어가더라구요..아직 리액트를 사용해본 경험이 없는 상황이라 인강을 결제해서 리액트에 대해 경험해 보고...아마 강의를 듣고나면 클론코딩 정도로 경험을 해 볼 수 있을거같아요 그걸 조금 변환해서 포폴에 추가를 하고 접해본 경험이 있음을 어필해서 지원을 하는 방향이 더 좋을지 아님 가지고 있는 포폴이나 이력서등으로 계속 지원을 하면서 자바스크립트에 대해 더 공부를 해나가는것이 나을지 고민이 되네요... 게다가 올해 딱 30이라 마음만 급해지는데 또 강의를 듣자니 시간이 어느정도 소요될거같기도하고 여러가지로 고민이 되는 시간이네요...취업 준비생에게 조언 부탁드릴께요..!

답변

안녕하세요. 리액트 입문을 준비중이시군요. 리액트의 장점 중 하나가 러닝커브가 낮다. 즉 초반에 입문하기 어렵지 않다는 것이 대부분의 의견이기도 합니다. 그러니 미리 너무 걱정하지 않으셔도 될 것 같습니다. 일단은 기본적인 입문 과정을 마치면 그 이후부터는 프로젝트를 진행하면서 필요한 것을 찾아보면서 진행하는 것을 권장 드립니다. 특히 중요한 것은 자신에게 가장 알맞는 학습 방법을 찾는 것인데요. 강의도 워낙에 많기도 하고 남들은 다 좋다는 강의도 자신에게는 안 맞을 수 있으니 샘플 강의를 보고 잘 판단하셔야 할 것 같습니다. 유료 강의는 그 만큼 퀄리티가 좋기도 하지만 항상 좋은 결과를 보장하는 것은 아니기도 하니까요. 저는 가볍게 훝어보기용으로 코딩애플님의 유튜브 강의 영상들도 한번 추천 드려봅니다. 2022 코딩애플 new 리액트 강의 https://www.youtube.com/playlist?list=PLfLgtT94nNq0qTRunX9OEmUzQv4lI4pnP 그리고 취업을 위해서는 말씀하신 것처럼 단순히 스터디에서 끝나는 게 아니라 프로젝트를 진행하여 포트폴리오를 준비하셔야 합니다. 특히 프로젝트 초기 구성부터 어떤 고민들을 했고, 개발을 하면서 어려웠던 부분과 그것을 어떻게 해결해 나갔는지 면접관들은 궁금해 하실 겁니다. 또한 단순 개발 뿐만 아니라 배포하고 운영, 개선까지 경험해 보실 수 있으면 좋겠네요. 다만 이러한 것을 만족하려면 다양하게 최신 트렌드 등에 관심을 갖고 찾아보셔야 할 수도 있어요. 가장 좋은 방법은 리액트 커뮤니티에 가입하여 최신 동향을 꾸준히 찾아보고, 리액트를 잘 하는 분들도 찾아서 많이 물어보시는 것도 하나의 방법이겠네요. 해커톤이나 경진대회 또는 부트캠프 등을 참가하면서 협업과 개발 경험을 늘려나가는 것도 추천드립니다. #나이는숫자일뿐

3. 리액트 패턴/구조를 구성할 때 고려해야 하는 부분은 어떤 게 있나요?

요즘 React 패턴/구조에 관심이 많아졌는데요. 어떤 방법으로 컴포넌트를 구성하고, 폴더 구조는 어떻게 짤 지 고민이 많습니다. 다른 분들은 어떻게 하시는지 궁금한데 조언 부탁드립니다. (혹은 참고할 만한 글이 있다면 공유 부탁드려요~~ 꾸벅)

답변

안녕하세요😄 React 에는 Component는 재사용 가능한 UI 기본단위라고 생각합니다. 기획서나 디자인을 보고 중복되는 부분이나 다시 사용 할 수 있는 부분을 나눈다고 생각하시면 좋을 것 같습니다. Ex) 버튼, 인풋창 , 상단 타이틀, 텍스트에디터, textarea 등등... 이런식으로 작게 쪼개서 사용하시면 편하실겁니다!! 폴더구조는 저같은 경우는 Next를 사용하는데, pages - 페이지 component - 위에서 나눈 컴포넌트 utils - 상수 데이터 및 타입interface 전역함수 template - 페이지는 아니지만 모달창 같은곳에 사용하는 페이지 이런식으로 사용하고 있습니다!! 도움이 되었으면 좋겠네요~ 화이팅~💪

4. React를 막 시작했는데 클래스 컴포넌트를 배워야 할까요?

이제 React를 배우기 시작한 초보 개발자입니다. 튜토리얼을 하는 중인데 class component라는 키워드를 발견했습니다. 찾아보니 요즘은 전부 functional component로 개발한다고 하네요. 2022년에도 클래스 컴포넌트를 배워야 할까요? 배워야 한다면 이유가 있는지 궁금합니다! (완전 초보입니다. 답변 부탁드립니다!)

답변

굳이 공부할 필요는 없을 것 같아요. 간혹 클래스 컴포넌트로 작성 된 코드를 유지보수 하거나 함수형으로 바꾸는 작업을 할 수 있습니다. (또는 클래스 컴포넌트로 작성된 오픈소스를 봐야 하는 경우가 있음) 그때는 윗분이 말해주신 것 처럼 클래스 컴포넌트의 동작 방식부터 시작해서 모르는 부분만 공부하면 좋을 것 같네요.

5. React로 프로젝트할 때 반드시 필요한 라이브러리 추천해주실 수 있나요?

안녕하세요! 노마드코더 리액트 강의를 막 끝나고 이제 프로젝트를 해보려고합니다. 리액트로 프로젝트할 때 써보면 좋을 또는 여러분들이 반드시 사용하는 라이브러리가 있는지 궁금합니다. 아무래도 라이브러리가 너무 많아서 많은분들이 현업이나 프로젝트에서 사용하시는걸 공부하고싶네요. 의견 부탁드립니다:)

답변

안녕하세요~😄 일단 기본적으로 사용해야하는 라이브러리는 통신,CSS 관련을 주로 사용하는것 같아요!! 통신쪽에서는 axios를 주로 사용하는것 같고, CSS쪽은 tailwindCSS를 주로 사용하는것 같아요!! (큰 프로젝트에서는 좀 힘들수도 있습니다!) 이 이외에서는 자신이 구현할 기능에 따라 달라지는 부분이라 추천드릴만한게 없네요 ㅠㅠ 그래도 라이브러리를 그냥 사용하시기 보다는, 그 라이브러리 작동원리 같은걸 같이 생각하시면 사용하시면 더욱더 좋을것 같습니다!! 화이팅💪🏻