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..

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를..

props를 사용하는 방법 props = 부모 컴포넌트로부터 자식 컴포넌트에게 데이터를 전송하는 방식. (부모->자식) 부모에 props를 사용하면 자식 컴포넌트(함수)의 인자로 props 객체가 들어가게 됨. >> 하나의 버튼을 만들어서 props를 이용해 버튼의 스타일을 관리해서 재사용 할 수 있게됨. - 예> 우리가 버튼을 두개를 만드는데, 디자인(즉, style속성)은 같게 하고 안에 텍스트만 다르게 하고 싶을 때는 1 / 우선 Btn이라는 컴포넌트를 만든다. function Btn() { return ( ); } 2 / Btn 컴포넌트를 설정할 App컴포넌트를 만든다. function App() { return ( ); } 우선은 Btn 안에 텍스트를 다르게 설정해야하므로 Save Changes..

React. React JS - Unit Converter (CSS추가) Unit Converter (수정) React) React JS - practice. 단위변환기 (Unit Conversion) React JS 기초 예제 실습 - 단위 변환기 (Unit Conversion) 분(M) - 시간(H) M = H * 60 H = M / 60 function App() { retu.. mywebproject.tistory.com - km에서 mile단위 변환기 기능 추가 - select메뉴 포함하는 App 컴포넌트 - css 변경 converter.html style.css * { margin: 0; box-sizing: border-box; font-family: -apple-system, BlinkM..

지난 포스팅의 예제를 이어서 진행함. 🔻 React. React Js - setState React. React Js - state (상태) / 예제 React) React Js 입문 - (下) JSX React) React Js 입문 - (中) Events in React React) React Js 입문 - (上) React.js 는 interActive 웹사이트를 쉽게 만들 수 있게 해.. mywebproject.tistory.com State Functions const root = document.getElementById("root"); function App() { const data = React.useState(0); const [counter, setCounter] = data; con..