0️⃣ 들어가며
리액트를 말하기전 먼저 자바스크립트에 대해서 간단하게 이야기하고 들어갈게요 🙋🏻♂️
리액트가
자바스크립트기반 으로 만들어진건 안 비밀
자바스크립트 ( Javascript, js ) 는 브라우저 에서 어떤 로직 을 실행할 수 있게 도와주는 언어에요
- 브라우저 - 크롬, 사파리, 네이버 웨일, 파이어폭스
📝 NOTE
로직이라는 것은 어떤 프로그램을 만들 때의 논리적인 흐름을 이야기 해요.
예를 들어 프로그램이라는건 크게입력과처리,출력단계로 나눌 수 있을텐데
이 단계가 진행되는 사이에 많은 로직, 즉 논리적인 흐름들이 포함이 될 것이에요
예를 들어 숫자를 입력받아서 입력받은 숫자에 100을 곱한 결과를 나타내는 프로그램이라 한다면
1️⃣ 입력을 받고,or 아이디, 비밀번호를 입력받고 로그인 버튼을 클릭
2️⃣ 그 입력을 넘겨서 100을 곱해주고,or 회원인지 아닌지 확인하고
3️⃣ 그 값을 출력or 로그인 완료되어 인증 토큰을 전송하고
해주는 이러한 일련의 과정들을 로직이라 부를 수 있을 거에요
저는 처음에 개발을 시작할 때로직이라는 단어가 어렵게 다가왔었던 기억이 있어서 쓸데없이 과하게 예를 들었네요😂
1️⃣ 자바스크립트의 특징
위에서 말했듯 브라우저에서 자바스크립트를 이용하여 로직 을 실행할때 좋은점은 사용자들이 보는 것을 조작할 수 있는 것이에요
🙋🏻 : 그럼 브라우저에서 문서를 보여주기 위해
js와 더불어 사용하는
html,css는 사용자들이 보는 것을 조작할 수 없나요?🐸 : 넵 우리가 흔히 알고 있는 3세트
html,css,javascript에서
html과css는 그저 브라우저에 문서를 보여주기 위해
정적(static)요소로 간주되는데.정적 요소란 사용자와의 상호작용이 없고, 페이지가 로드될 때 변하지 않는 요소라는 것을 의미해요.
html은 웹 페이지의 구조를 정의하고 ,css는 해당 구조를 스타일링하며, 둘 다 페이지가 로드될 때변경되지 않는 정보를 제공합니다.
이러한 특징을 갖고 있는 JavaScript가 위에서 부터 계속
사용자가 보는 것을 조작할 수 있다고 했는데요
자 그럼 대체 JavaScript가 무엇을 조작하냐?! html이나 css를 조작하는 거아니야?
JavaScript가 조작하는 바로 그것.!!
그것은 바로 DOM(Document Object Model) 이라는 것입니다.
2️⃣ 자바스크립트와 DOM
DOM은 Document Object Model의 약자입니다. 이것은 웹 페이지를 구성하는 요소들을 계층적으로 구조화하여 표현하는 방법입니다.
간단히 말하자면, DOM은 HTML 문서를 나타내는 트리 구조로,
각각의 HTML 요소(예: <html>, <body>, <div>, <p> 등)를 노드로 표현합니다. 이 노드들은 부모-자식 관계로 연결되어 있어서 전체 문서의 구조를 표현합니다.
DOM은 HTML 문서의 객체 지향 표현이며, JavaScript를 사용하여 DOM을 조작함으로써 웹 페이지의 구조, 콘텐츠, 스타일 등을 변경할 수 있습니다.
예를 들어, JavaScript를 사용하여 특정
이벤트(버튼을 클릭한다던지 드롭다운 모양의 버튼을 클릭했을때 메뉴가 보이게 한다던지)가 발생했을 때 특정 요소를 숨기거나 보이게 할 수 있고, 새로운 요소를 추가하거나 삭제할 수도 있습니다.
따라서 JavaScript를 사용하면 웹 페이지의 동적인 행동을 제어하고 사용자 경험을 개선할 수 있습니다.
아무튼!!!
이 자바스크립트로 DOM이라는 것을 조작 할 수 있고 사용자들이 보는 것들( html, css,등.. )을 변경 할 수 있다는 것
🐸 : DOM 이랑 HTML 이 다른점이 뭐지? 이해가 안될땐 이 게시물에 나오는DOM이라는 글자를HTML로 바꿔서 이해 해 봐요 정확한 뜻은 아니지만 우선은 그렇게 넘어가보자구요
심지어 새로운 html 페이지를 매번 불러오지 않고도 말이죠
다른것을 보여주기위해 새로운 html페이지를 요청할 필요 ❌❌
왜?
페이지에 변경사항이 생길때마다 js를 통해 DOM을 조작해 다시그리기(Reflow) 만하면 되니까 html문서를 매번 불러올 필요가 없다.!!
🙋🏻 : 오..그럼 html
한번만불러와서 자바스크립로 계속 변경하면서 모든걸 다 해결할 수 있으려나?!
🐸 : 넵! 그것이 자바스크립트의( javascript ) 역할이니까요😏
🚩 :한번만불러온다는 부분은SPA라는 또 다른 개념이 있는데 여기에 대해서는 따로 글에서 정리해보도록 할게요
3️⃣ 마무리
리액트가 뭔지 알아보려고 했는데 이야기만 한다고요? 하지만 당신은 이미 리액트에대해서 절반을 알았습니다👩🏻💻
리액트역시 위에서 이야기한 자바스크립트를 효율적으로 사용할 수 있게 도와주는
#라이브러리 이니까요!!
리액트는 개발자가 DOM 조작에 일일이 직접 신경 쓰지 않고도 동적인 웹 애플리케이션을 구축할 수 있도록 도와줍니다.
결국 리액트는 웹사이트를 위한 최신의 반응형 사용자 인터페이스를 만들 수 있도록 위에서 말한 자바스크립트의 특성을 포함하여 여러 편리한기능을 가지고 도와준답니다
끝🧏🏻♂️
💬 : 위 내용에대해 더 궁금한점이 있거나,
틀린내용이 있거나
질문이 있다면 댓글로 달아주세요.! talk!talk!
