뉴비 리액트 질문 있습니다.

Question

안녕하세용.리액트를 사용하려고 하는데 궁금한 게 있어서 여쭤봅니다.html, css, js로만 개발하다가 예전에 리액트 공부했었는데,리액트를 만든 목적?이라고 해야 하나... 아무튼 뭔가 잘 와닿지 않았습니다.글이 두서 없이 길어도 양해부탁드립니다.1. 기본적으로 왜 리액트를 쓰는지를 모르겠습니다.문법적으로 이해가 안되는 건 아닌데,제가 잘 모르다보니까 너무 막연한 질문만 하게 되어서 그런건지, 공식 문서나 답변 주시는 분들도 뭔가 저에겐 추상적으로 느껴지더라고용.예를 들어 제 머리 속에는 자바 개발자라고 하면,C로는 못하는 자바만 할 수 있는 작업? 같은 걸 다룰 수 있어야 자바를 제대로 쓴다고 생각이 드는데,HTML, CSS, JS로는 못하는 리액트만의 작업? 이 뭔지 모르겠습니다.2. 폴더 구조를 어떻게 하는 지 모르겠습니다.리액트 쓰면서 제일 이해가 안됐던 부분인데, 리액트 사용하시는 분들 마다 폴더 구조? 파일 구조?가 좀 다르더라고요.타임리프로 예시를 들어보겠습니다.temp.html 이라는 페이지가 있고,페이지 내부에 값을 입력받을 form 컴포넌트를 temp_form.html페이지 내부에 조회 결과를 보여줄 table 컴포넌트를 temp_table.html 가 있다고 가정하겠습니다.그럼 그냥 대충temp.html 파일 내용엔 temp_form.html, temp_table.html를 불러오기만 하고,상세한 내용 들은 두 html 내부에 작성하겠죠?위 상황에서, 폴더 구조를 그냥 이렇게 잡으면 문제가 있는 건지 궁금합니다.temp-- temp.html-- temp_form.html-- temp_table.html리액트는 한 페이지 내부에서 동작하는 것들도 여기저기 다른 폴더에 퍼져 있는 경우들이 많더라고용.그리고 이렇게 컴포넌트화 시키는 작업을 리액트에서만 할 수 있는 것도 아닌데, 왜 다들 리액트를 많이들 쓰시는 지 모르겠네용.애초에 제 접근 방향 자체가 잘못된 걸까요...?아니면 리액트를 단순히 fetch 요청으로 받아온 데이터 매핑을 자바스크립트에서는 아래처럼 작성하는데,document.querySelector('원하는 선택자').textContext = 받아온 데이터;리액트는 그냥 좀 더 편하고 짧게 쓸 수 있는 용도라고 생각하고 써도 되나요?

신입공돌이 · Answer

1,2번에 대한 답을 합쳐서 드리면 솔직한 말로 다른 기술로도 글쓴이분이 말씀하게 가능하지만그냥 딱 명쾌하게 말하면 => 그냥 요즘 많이 써서 + 취업하려면 리액트는 쓸줄 아는게 좋기 때문입니다.

더미 · Answer

사용자에게 빠른 속도를 제공하면서개발자가 빠르고 편하게 개발할수 있게 만들어졌습니다.

월급은나의빛 · Answer

Virtual DOMhtml, css, javascript 로만 할 수 없는 react 만의 기능은 virtual DOM 인 것 같습니다. javascript 로만 작업을 하면 js 코드가 수행될 때마다 브라우저 DOM 변경이 일어나니 빈번한 변경이 있는 경우 브라우저 성능이 크게 떨어집니다.페이스북에서 리액트를 만들었던 건 우연이 아닙니다. 페이스북 ui가 무한 스크롤 가능하기 때문에 매우 큰 DOM 을 조작해야 하므로 그런 상황에서도 성능이 좋은 방식이 필요했습니다. 그래서 virtual DOM을 업데이트한 후 한번에 브라우저 DOM에 commit 하는 방식의 javascript 라이브러리를 만든 것이라 생각합니다."가장 중요한 건 눈에 보이지 않아" - <어린왕자>에서

세브라이드 · Answer

반응형 컴포넌트를 쉽게 만들 수 있습니다.예를 들어 알림이 올때마다 알림 버튼에 빨간 뱃지를 달아야 한다면, 일반 HTML CSS JS로는 알림 버튼에 일일히 이벤트 리스너 추가하고 리스너 관리하고 해야하지만 리액트로 하면 그냥 notificationList를 props로 받으면 됩니다.그냥 편한대로 쓰시면 됩니다.정형화된 구조가 있긴 한데 사실 굳이 그렇게 안해도 됩니다. 편한대로 쓰셔도 되요.

nippori · Answer

1.이건 말씀하신대로 HTML, CSS, JS로 구현을 할수 있습니다만 요즘 웹페이지 처럼 보이게 새로고침 안하고 ui, 데이터가 자연스레 바뀌게 하려면 ajax 방식을 써야하는데 적용해보시면 react 쓸 때랑 다르게 꽤나 코드가 지저분해질겁니다. 가상돔 얘기는 많이 들으셨을테니 예전 방식으로 한번 구현하면서 느껴보시면 좋을것 같고요.(JS를 그냥 좀 더 편하고 짧게 쓸 수 있는 용도로 유행했던건 Jquery 입니다. 요것도 한번 찾아 보시고요)2.폴더구조는 프론트쪽에서는 특별히 정해진게 없죠. 다만 대중적으로 사용하는 구조가 검색하면 잘 나올겁니다.(큰 기업에서 어떻게 사용하는지 구조도 찾아보면 다 나옵니다) 그외 '프론트 클린아키텍처', 'FSD 아키텍처' 로 검색해보시면 구조를 어떻게 짜면 좋을지에 대한 좋은 글들이 많이 나올겁니다.

코딩하는 두루미 · Answer

생산성의 차이도 크다고 생각해요html과 js로 파일 drag & drop 구현한다 vs 리엑트 라이브러리 딸깍10배이상 차이날거같습니다.심지어 요즘은 처음 쓰는 라이브러리여도 GPT가 틀을 잡아줍니다

독고구마 · Answer

몇몇 분들이 성능 얘기 하셨는데,https://krausest.github.io/js-framework-benchmark/current.html리액트 성능은 그리 좋지 않아요. 앵귤러와 같이 하위권에 속합니다.vue, svelte, solid 와 같은 프레임워크들에 비해 많이 낮습니다.지금까지도 많이 추천되는 이유는 라이브러리 생태계, 취업, 인력수급 등에서 타 프레임워크들에 비해 압도적이라 그런거라 봅니다.

yeori · Answer

1980년 무렵 컴퓨터에 GUI가 도입된 이후 모델과 뷰의 상태를 일치시키는 방법을 놓고 수많은 논의가 있었습니다.모델(M) - 관념적인 데이터 집합과 연산들뷰(V) - 모델의 시각, 청각적 표현이를테면 결제전, 결제 진행 중, 결제성공 또는 실패와 같은 상태를 화면에 정확히 그려줘야 함.이게 말은 쉬운데, 웹에서는 다양한 모델 상태를 HTML로 한땀 한땀 그려주는 작업이 꽤 지루하고 버그도 많습니다. 게다가 코드 중복이 말도 못하게 많습니다.이거는 예전에 주류였던 jquery로 뭐라도 만들어 보면 뼈저리게 느낄 수 있습니다.여기에 추가적으로 다음과 같은 시대적인 도전 과제가 대두됐음.웹에서도 데스크탑앱처럼 부드럽고 미려한 UX를 구현하고 싶다.과거의 웹은 대체로 정적이어서 데스크탑 앱과는 확실히 느낌이 많이 달랐습니다.팝업창을 가운데 부드럽게 띄우는 일조차도 해줄게 많았고, 이걸 재사용 가능하게 만드는 건 또다른 노력이 필요함.게다가 15년 전만해도 브라우저 제조사마다 지원하는 js 문법이 조금씩 달랐는데, 이 때문에 모든 환경, 모든 기기에서 일관되게 작동하는 재사용 가능한 뭔가를 만든다는게 품이 많이 들었습니다.이 시절에는 jquery가 브라우저 호환성을 보장하는 것만으로도 생산성을 획기적으로 늘려줬습니다.하지만 시절이 변하고 지금의 브라우저들은 웹표준을 잘 준수하는 편입니다.이런 환경 변화를 토대로 웹에서도 네이티브앱과 비슷한 사용자 경험을 구현하면서, 생산성도 잡으려는 시도가 이어짐.여기서 SPA 프레임워크들이 쏟아짐. 앵귤러, 리액트, VUE, SVLETE 등등...너는 모델만 바꿔, VIEW는 내가 알아서 업데이트 해줄께모델의 상태 변화를 자동으로 감지해서 HTML 덩어리를 알아서 렌더링 해줌.그리고 재사용 가능한 컴포넌트를 정의하고 사용하는 방식을 프레임워크가 강제해서 불필요한 오류를 차단함.따라서 결론은 Svelte씁시다, Svelte!Svlete로 대동단결!!

judys · Answer

저도 리액트 뉴비지만 실무에서 써보고 느낀 몇 가지는 다음과 같습니다.(개인적인 느낌이므로 참고만 해주세요.) html, css, js로 못하는 것을 리액트가 해준다? No. 다만, 쉽게 할 순 있다.리액트를 잘 하고 빨리 습득하려면 결국 html, css, js가 탄탄해야 합니다. 그런데 굳이 현장에서 리액트를 왜 쓰느냐, 하시면 html, css, js로 구현하기에는 소스가 복잡해지는 기능들 -> 코인 사이트처럼 실시간 금액, 차트 변동 추이 같은 것을 화면 전환 또는 리로딩 없이 보여줘야 할 때 적절한 것 같아요. 반대로 굳이 실시간으로 데이터가 변하는걸 화면에 보여줄 필요가 없는 시스템은 리액트로 안 만들어도 된다는 뜻이죠. 예를 들면 공공기관 내부에서 쓰는 시스템이나 인사시스템 같은 것들은 스프링-jsp(html, css, js 또는 jquery 조합)로 충분하다 생각합니다. 저도 jsp만 하다가 오랜만에 채용공고를 보니 어느 순간 프론트 기술이 거의 리액트로 바뀌어 있더라고요. 페이스북에서 처음 리액트를 만든 이유도 원래 html, css, js 조합으로 만들어져 있던 페이스북 앱 사용자가 늘어나고 규모가 점차 커지면서 유지보수도 쉽게 하고 기능 구현의 복잡도를 낮추기 위함이라고 알고 있어요. 이제는 워낙 많이들쓰니까 리액트에서 갖다 쓸 수 있는 라이브러리도 엄청 다양해졌고요. html, css, js로 못하는걸 리액트가 해준다라기 보다는 '더 쉽게 할 수 있다' 라는 표현이 조금 더 적합한 것 같습니다. 폴더 구조가 다른건 처음에 구조 잡는 사람이 어떤 구조로 잡느냐에 따라 달라질 수 있는 것 같습니다. 화면에 공통으로 들어가는 컴포넌트들은 어느 화면이든 커스터마이징 되어서 쓸 수 있을테니 보통 components라는 폴더에 두고요. 그러면 한 화면에 들어가는 n개의 컴포넌트 중 공통 컴포넌트 성격을 띄는 것들은 components라는 폴더에 있을거고, 그 화면에서만 쓰는 컴포넌트는 화면 명칭을 따서 지은 폴더 안에 있겠죠. 그런데 이건 jsp나 타임리프로 만들더라도 공통 성격을 가지는 부분은 따로 빼놓지 않나요?데이터 변화에 따라 화면 모양을 빨리 바꿔줘야 하는, 사용자에게는 그것이 부드럽게 바뀌거나 데이터만 샥 바꿔치기하는 느낌이 드는 ui로 개발이 되어야 할 때 리액트가 적합한 것 같습니다. 리액트나 뷰 같은 것들은 데이터가 바뀌면 화면도 함께 렌더링한다의 개념으로 접근해야 해서요. 이걸 js나 jquery로 구현한다면 fetch로 받아온 데이터를 보여주기 위해 DOM을 조작하는 소스를 작성해줘야 하는 거잖아요? 하지만 리액트는 굳이 그런 로직을 추가할 필요가 없고, 데이터만 잘 바꿔치기 하면 되니까요.(상태관리를 잘하면)

뉴비 리액트 질문 있습니다.

9개의 답변

Q&A 목록