whatisthis?

참고 - 자주 사용하진 않는다. import { useState } from "react"; function App() { const [showing, setShowing] = useState(false); const onClick = () => { setShowing(prev => !prev); }; return ( {showing ? "Hide" : "Show"} ); } export default App; 자세한 설명은 이제 생략하겠음.. (단순 useState를 이용한 것) 이제 숨김 버튼을 만들었으니 숨길 대상(주로 다른 컴포넌트를 숨기고 나타낸다)을 만들어보자. function Hello() { return Hello; } 단순하게 h1 jsx를 리턴하는 Hello 컴포넌트를 만든 후 func..

React. React JS - Effects (1) React JS State Props Effects App.js const [counter, setValue] = useState(); import { useState } from "react"; 자동으로 import문이 생긴다. 이전처럼 React.useState()라고 안하고 그냥 useState()만 하면.. mywebproject.tistory.com 지난 포스팅의 내용에 이어서 진행됨. 📌 useEffect useEffect는 두개의 argument를 가지는 함수이다. arg1 > effect: EffectCallback (한번만 실행할 코드를 담은 콜백) arg2 > deps?DependencyList const [keyword, setKe..

React JS State Props Effects App.js const [counter, setValue] = useState(); import { useState } from "react"; 자동으로 import문이 생긴다. 이전처럼 React.useState()라고 안하고 그냥 useState()만 하면 된다! 여기에 이전에 배웠던대로 onClick함수를 만들어 버튼의 onClick prop에 연결해주자. 🔻 App.js 전체코드 import { useState } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () => setValue(prev => prev + 1); return ( ..

우선, 버튼에 해당하는 컴포넌트를 담은 Button.js를 만듬 >> 각각의 컴포넌트를 하나의 js파일로 따로 관리! Button.js function Button({ text }) { return {text}; } export default Button; App.js 수정 - import Button - Button 사용 App.js import Button from "./Button"; function App() { return ( Welcome back! ); } export default App; ** prop-types 패키지 설치 🔻 터미널창에 아래와 같이 입력 npm i prop-types Button.js import PropTypes from "prop-types"; function Bu..

create-react-app 가장 먼저 할 것은 node js의 설치이다. Node. Node Js + NPM 이란? Node.js는 자바스크립트를 브라우저 외의 다른 환경에서도 사용할 수 있게 해주는 런타임입니다. http서버가 내장되어 있기 때문에 보통은 서버로 많이 사용합니다. 하지만 응용 프로그램을 실행 mywebproject.tistory.com node js 설치 + npm이란 무엇인지에 대해 위 포스팅에 정리했었다. node가 잘 설치되었다면, cmd창을 열어 npx create-react-app (프로젝트app이름)을 입력한다. npx create-react-app project 설치가 완료되었으면 (Happy hacking!이라 뜸) 해당 디렉터리에 들어가보자. 위와 같이 package..

Node. Node JS 서버 생성하기 우선 server.js 파일을 만들고, 아래 코드를 작성함. server.js const http = require('http'); // 서버를 만드는 모듈 불러옴 // http 모듈 내의 createServer 메소드 http.createServer((request, response) =>.. mywebproject.tistory.com 지난 포스팅에서 server.js를 생성 후 cmd창에서 node server.js까지 진행했었다. server.js const http = require('http'); // 서버를 만드는 모듈 불러옴 // http 모듈 내의 createServer 메소드 http.createServer((request, response) =>..

우선 server.js 파일을 만들고, 아래 코드를 작성함. server.js const http = require('http'); // 서버를 만드는 모듈 불러옴 // http 모듈 내의 createServer 메소드 http.createServer((request, response) => { // 서버 만드는 createServer 메소드 console.log('server start!'); }).listen(8080); // 8080포트에 연결(listen) Node.js는 모듈 시스템을 구축하고 있습니다. ** 모듈 = 필요한 것만 불러오는 것 http 서버가 필요하니 http 모듈을 require 메소드를 통해서 불러와 http 변수에 저장하였습니다. 전 시간에 말했던 npm의 패키지가 이와 비..

Node.js는 자바스크립트를 브라우저 외의 다른 환경에서도 사용할 수 있게 해주는 런타임입니다. http서버가 내장되어 있기 때문에 보통은 서버로 많이 사용합니다. 하지만 응용 프로그램을 실행하는 데 쓸 수도 있습니다. 웹팩, 바벨과 같은 도구들과 일렉트론 같이 자바스크립트로 데스크탑 프로그램을 만드는 프레임워크가 모두 Node.js를 기반으로 돌아갑니다. 흔히들 생각하기로는 서버가 엄청 복잡하다고 생각하지만, Node.js에서는 10줄도 안 되는 코드로 서버를 구동할 수 있습니다. +) 자바스크립트 문법을 사용하기 때문에, 다른 서버 언어를 배우지 않아도 돼서 부담이 훨씬 덜합니다. 어차피 클라이언트(웹 브라우저) 상에서는 자바스크립트를 쓸 수 밖에 없습니다. 그런데 서버 언어는 JSP나 PHP, A..

PropTypes 만약, 우리가 fontSize에 해당하는 prop의 값을 number로 주지 않고 text로 주면 어떻게 될까? return ( ); function Btn({ text, fontSize }) { return ( {text} ); } React는 이것을 오류라고 알려주지 않는다. 왜냐면 문법적으로는 틀린 것이 없으므로. 따라서, 우리는 propTyes라는 패키지를 다운받아서 사용할 수 있다. propTyes는 컴포넌트명.propTypes라고 하여 객체의 형식으로 컴포넌트의 prop별로 타입을 지정해줄 수 있다. 예를 들면, Btn 컴포넌트의 text 속성은 string으로, fontSize 속성은 number로 설정해준다. Btn.propTypes = { text: PropTypes.s..

React. React Js - props props를 사용하는 방법 props = 부모 컴포넌트로부터 자식 컴포넌트에게 데이터를 전송하는 방식. (부모->자식) 부모에 props를 사용하면 자식 컴포넌트(함수)의 인자로 props 객체가 들어가게 됨 mywebproject.tistory.com 지난 포스팅인 props의 예제를 이어서 진행함. 지난시간에 했던 것을 복습해보자. Btn 컴포넌트를 설정하는 App 컴포넌트에서 return ( ); 위와 같이 text라는 property를 주고, (text 대신 banana라고 이름 붙여도 ok. 이름은 상관 X) function Btn({text}) { return ( {text} ); } Btn 컴포넌트에서 props라는 파라미터(=객체임) 의 text를..