개발공부/리액트16 React(3) 컴포넌트로 동적인 UI 만들기(삼항연산식을 곁들인) 1. 컴포넌트에 대해 - 컴포넌트란? - 컴포넌트 사용법 - 갑자기 든 의문점 2. 동적인 UI 만들기 - 삼항연산식 글을 누르면 상세페이지(모달창)가 뜨게끔 하려고 한다! (완전히 페이지가 전환되는 것은 후에, router를 배우게 되면 할 것임) ※ 팝업창 VS 모달창 - 팝업창 : 현재 열려있는 브라우저 페이지에 또 다른 브라우저 페이지를 띄우는 것을 말한다. - 모달창 : 기존의 브라우저 페이지 위에 새로운 윈도우 창이 아닌, 레이어를 까는 것을 말한다 컴포넌트를 배운다면, 처음보는 사람도, 이라고 호출되는 것을 보고, "아, 모달창이구나!" 하며, 쉽게 알 수 있으니, 배워보도록 하자! 컴포넌트에 대해 🤷♂️ 컴포넌트란 ? 리액트로 만들어진 앱을 이루는 최소한의 단위로서, 보통 리액트로 만든 .. 2023. 6. 14. React(2) 리액트 state & onClick 사용법 (reference data type을 곁들인) 목차 1. 기본사용법 2. state사용법 3. onClick 사용법 4. state변경하는 방법 기본 사용법 자, Visual Studio Code에 React를 작성해보자! ※ 폴더 설명 - node_modules 폴더 : 라이브러리 코드 보관함 - public 폴더 : htm파일이나 img파일 임시적으로 저장하고 싶을때, static파일 모아 놓는곳 - src 폴더 : 주로 우리가 코드 짜는곳 ※ 파일 설명 - src폴더에, App.js : 이 쪽에 코드를 짤것이다. 이것이 우리의 메인 페이지! - src폴더에, App.css : 이 쪽은, css와 동일하다! - "기본 홈페이지 틀인 index.html에, 우리가 다룰 App.js를 집어넣어 주세요" 라는 행동을 index.js가 해주고 있음 - .. 2023. 6. 10. React(1) MAC OS 리액트 개발환경 세팅 개발 환경 세팅(실행환경은 MacOS에서, Visual Studio Code로 진행하였다.)(윈도우도 자세히는 아니지만 알려 줄 예정)node.js 설치※ 엥! 저는 react를 하고 싶어서 왔는데요!! 왜 갑자기 node.js?? :- Node.js는 JavaScript runtime environment다. 기본적으로 자바스크립트의 런타임(=실행할 수 있는) 환경은 브라우저이다. 각 브라우저들은 자바스크립트를 읽고 해석하기 위해 엔진들을 가지고 있는데, 그 중 구글 크롬에서 사용되었던 v8 자바스크립트 구동엔진을 따로 떼어내서 Node.js를 출시하였다.- 즉, 브라우저 위에서 자바스크립트 엔진을 돌리는 것에서 벗어나, 로컬 PC에서 바로 자바스크립트를 읽고 해석할 수 있게 된 것이다.- 또한, No.. 2023. 6. 10. React(0) 리액트와 리액트 네이티브 개념 정리 목차 1. 리액트에 대해 1) 리액트는 어쩌다가 만들어졌을까? 2) 리액트의 특징 2. 리액트 네이티브에 대해 3. FE 프레임 워크들 비교 1) 성능 비교 2) 관심도 비교 3) 러닝 커브 리액트에 대해 - React는 페이스북이 만든 UI Component를 만들기 위한 자바스크립트 라이브러리이다. 리액트는 어쩌다가 만들어졌을까? - JavaScript를 사용하여 HTML를 제어를 한다고 하면, DOM을 변형시키기 위하여, DOM Selector API 를 사용해서 특정 DOM 을 선택한뒤, 특정 이벤트가 발생하면 변화를 주도록 설정해야된다. (html에 class나 id를 설정하고, JS에서 getElementById로 원하는 이벤트가 발생하면 DOM을 바꿔준다.) ※ DOM (문서 객체 모델)이란.. 2023. 6. 3. 이전 1 2 3 4 다음
