인프런 커뮤니티 질문&답변
작성한 질문수
리액트를 사용시 인라인 기능이 가능한가요?, 스크립트 영역의 데이터들을 출력하려면 어떻게 하나요?
작성
·
201
0
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요.
1. 강의 내용과 관련된 질문을 남겨주세요.
2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요.
(자주 하는 질문 링크: https://bit.ly/3fX6ygx)
3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요.
(질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG)
질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요.
=========================================
[질문 템플릿]
1. 강의 내용과 관련된 질문인가요? (예/아니오)
2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오)
3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오)
[질문 내용]
리액트를 이용하여 프론트를 개발하면 리액트도 자바 스크립트 언어이니 똑같이 인라인 기능을 사용할 수 있나요? 자바 스크립트, 리액트 둘다 모르는 상태이지만 리액트가 자바 스크립트 기반이라고 알고 있어서 질문 드립니다.
서버를 실행하였는데 스크립트 코드를 표시하려면 어떤 식으로 코드를 작성해야 하나요? 스크립트 영역 외부에서 <p th:text=“${user.username}></p>을 사용해보았는데 표시가 안되었습니다. 그리고 객체를 json으로 받았는데 json의 값들을 사용하려면 어떻게 해야 하나요?
답변 2
1
안녕하세요. 양치잘하기님, 공식 서포터즈 코즈위버입니다.
질문하신 내용이 자바에서 자바스크립트로 값을 직접 전달하는 형태가 리액트에서 가능한를 물어보신것 같아요.일단 리액트를 사용하고 있다면 그 방법은 불가능합니다. 리액트는 자바스크립트로 작성, 이를 노드환경에서 빌드하여 압축한 자바스크립트 파일 형태로 만들어 사용합니다. 즉 빌드 환경과 시점이 서로 다릅니다.
자바에서 json으로 응답한 데이터는 자바스크립트의 JSON 객체를 이용하여 파싱하여 사용할 수 있습니다. 보통 'var data = Json.parse(response);' 를 하면 JSON 구조 그대로 객체로 활용할 수 있습니다.
스크립트 코드는 해당 페이지로 접속한 후 웹 브라우저에서 제공하는 '개발자도구' (크롬일 경우 F12키) 혹은 '소스코드' 메뉴를 이용하여 확인할 수 있습니다.
감사합니다.
0
안녕하세요, 인프런 AI 인턴입니다.
양치잘하기님의 질문에 대해 자세히 살펴본 결과, “리액트에서 인라인 스크립트를 사용하는 방법” 및 “스크립트 영역에서 서버로부터 받은 데이터(예를 들면 JSON)를 사용하는 방법”과 관련된 기존 답변을 찾았습니다.
-
- 이 답변은 자바스크립트 내에 Thymeleaf 템플릿을 사용하는 방법에 대해 설명하고 있습니다. 리액트와 직접적인 관련이 있지는 않지만, 인라인 스크립트를 사용하는 일반적인 방법에 대한 이해를 도울 수 있습니다.
- 이 답변은 자바스크립트 내에 Thymeleaf 템플릿을 사용하는 방법에 대해 설명하고 있습니다. 리액트와 직접적인 관련이 있지는 않지만, 인라인 스크립트를 사용하는 일반적인 방법에 대한 이해를 도울 수 있습니다.
thymeleaf에서 자바스크립트 인라인을 사용할 때 질문있습니다.
- 특히 외부 자바스크립트 파일에서 Thymeleaf를 통해 서버 사이드 데이터를 인라인으로 사용하는 것에 대한 질문과 답변이 포함되어 있습니다. 리액트에서 사용하는 JS와 직접적인 연관은 없지만, 스크립트 영역에서 데이터를 다루는 관점에서 유용할 수 있습니다.
- 특히 외부 자바스크립트 파일에서 Thymeleaf를 통해 서버 사이드 데이터를 인라인으로 사용하는 것에 대한 질문과 답변이 포함되어 있습니다. 리액트에서 사용하는 JS와 직접적인 연관은 없지만, 스크립트 영역에서 데이터를 다루는 관점에서 유용할 수 있습니다.
리액트는 자바스크립트를 기반으로 하지만, 컴포넌트 기반의 개발 방식을 사용합니다. 따라서, 리액트 내에서 직접적인 인라인 스크립트 사용 방법은 React의 JSX 문법을 따라서 서버로부터 받은 데이터를 사용하게 됩니다. 예를 들어, JSON 데이터를 사용할 경우, 리액트 컴포넌트의 상태(state)에 할당하여 렌더링에 사용할 수 있습니다.
서버로부터 받은 데이터(예: JSON)를 사용하기 위해서는 리액트의 useState와 같은 상태 관리 훅을 사용하여 데이터를 컴포넌트의 상태로 관리하고, 해당 데이터를 JSX 내에서 적절히 참조하여 사용합니다.
정확한 구현 방법을 알기 위해서는 구체적인 코드 사례와 리액트 공식 문서, 혹은 관련 강좌 내용을 참고하는 것이 좋습니다. 리액트 개발에 있어서 JavaScript ES6+ 문법에 대한 이해도 필수적입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
아하 그럼 리액트를 사용하는 프론트 개발자가 존재하면 굳이 타임리프를 사용하지 않아도 되고 리액트에서 요구하는 데이터의 변수를 동일하게 하여 비지니스 로직과 컨트롤러에서 값을 반환 해주면 프론트 측에서 서버측(비즈니스 로직, 컨트롤러)이 반환해준 값을 화면에 출력하면서 기본적인 웹, 웹앱이 동작하는 건가요?
추가로 설명해주신 노드환경 이라는것이 node.js 인것 같은데 리액트 개발자와 스프링 개발자가 협업을 하여 웹을 개발하면 리액트의 노드와 스프링을 연동해서 데이터를 요청, 반환 하는것인가여?