반응형 Front35 [React] onClick을 활용하여 버튼을 누르면 값이 변경되는 코드 작성하기 ✔ onClick - NumberState.js import React from "react"; class NumberState extends React.Component { constructor(props) { super(props); this.state = { number: 0 } // 이 코드를 적어줘야 에러가 안 뜨고 값이 올라감 this.onClickPlus = this.onClickPlus.bind(this) this.onClickMinus = this.onClickMinus.bind(this) } // 클릭했을 때 값이 증가하는 버튼 onClickPlus() { this.setState({number: this.state.number + 1}) } // 클릭했을 때 값이 감소하는 버튼 onC.. 2024. 2. 20. [React] 리액트로 구구단 게임 만들기 📌 리액트로 구구단 만들기 ✔ this.state : 화면에서 클릭 시 바뀌거나 마우스를 올렸을 때 바뀌는 것들 위와 같이 입력 버튼을 클릭하기 전과 후에 바뀌는 요소들을 this.state 에 넣어주면 된다. 1. first 2. second 3. value 4. result constructor(props) { super(props); // this.state 에 바뀌는 요소들에 대해 적으면 된다. // 화면에서 클릭 시 바뀌거나 마우스를 올렸을 때 바뀌는 것들 (boolean 요소들과 같은) this.state = { first: Math.ceil(Math.random() * 9), // 첫번 째 숫자 : 임의의 아무 숫자나 만들기 second: Math.ceil(Math.random() * 9),.. 2023. 8. 21. [JavaScript] decodeURI() vs decodeURIComponent() 📌 decodeURI() vs decodeURIComponent() : decodeURI 와 decodeURIComponent 는 인코딩 된 URI를 디코딩하는 데 사용되는 JavaScript 전역 함수다. ◽ decodeURI() 와 decodeURIComponent() 의 차이점 • decodeURI() - encodeURI(url) 문자열을 사용하므로 문자, 특수문자( / ? : @ & = + $ #)를 디코딩할 수 없다. - ex) decodeURI("%41") : "A" 를 반환 - ex) decodeURI("%26") : "%26" 을 반환 • decodeURIComponent() - 문자, 특수문자를 디코딩할 수 있도록 encodeURIComponent(url) 문자열을 사용한다. - ex).. 2023. 6. 14. [JavaScript] XHR / XHR 표준 / XHR 예시 ✔ XHR ◽ XHR XHR 은 XMLHttpRequest 의 약자이다. Web API 중 하나인 이 XHR 객체는 비동기적으로 서버와 통신할 수 있도록 해주는 Ajax의 핵심 역할을 한다. Ajax 와 같이 페이지를 새로고침 하지 않고, 서버와 데이터를 받아오는 등의 인터랙션을 하기 위해서 사용한다. ◽ XHR 표준 const xhr = new XMLHttpRequest(); const formData = new FormData(); // 요청시 같이 보낼 데이터 xhr.open('요청 방식', '요청 주소'); xhr.onreadystatechange = () => { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status >= 200 && xhr.. 2023. 5. 25. [React] 미니 블로그 만들기 ✔ 미니 블로그에 필요한 기능 / 각 기능에 필요한 Component • 글 목록 보기 기능 (리스트 형태) - PostList, PostListItem • 글 보기 기능 - Post • 댓글 보기 기능 - CommentList, CommentListItem • 글 작성 기능 - PostWrite • 댓글 작성 기능 - CommentWrite ✔ 프로젝트 생성 npx create-react-app mini-blog cd mini-blog npm start ✔ 필요한 실습 패키지 설치 react-router-dom v6 / styled-components v5 npm install --save react-router-dom styled-components package.json 에 들어가서 확인할 수 있다.. 2023. 4. 26. [React] styled-components import React from "react"; import styled from "styled-components"; const Button = styled.button` color: ${props => props.dark ? "white" : "dark"}; background : ${props => props.dark ? "black" : "white"}; border: 1px solid black; `; function Sample(props) { return ( Normal Dark ) } export default Sample; 이렇게 나온다. color: ${props => props.dark ? "white" : "dark"}; background : ${props => props.dark.. 2023. 4. 25. [React] Font 와 관련된 속성 ✔ Font-family • serif - 각 글자의 모서리에 작은 테두리를 갖고 있는 형태의 글꼴 • sans-serif - 모서리에 테두리가 없이 깔끔한 선을 가진 글꼴 - 컴퓨터 모니터에서는 Serif 보다 가독성이 좋음 • monospace - 모든 글자가 같은 가로 길이를 가지는 글꼴. 코딩을 할 때 주로 사용 • cursive - 사람이 쓴 손글씨 모양의 글꼴 • fantasy - 장식이 들어간 형태의 글꼴 ✔ Font-style • normal - 일반적인 글자의 형태를 의미 • italic - 글자가 기울어진 형태로 나타남 - 별도로 기울어진 형태의 글자들을 직접 디자인해서 만든 것 • oblique - 글자가 비스듬한 형태로 나타남 - 그냥 글자를 기울인 것 2023. 4. 25. [React] Context 를 사용하여 테마 변경 기능 만들기 src > chapter_14 > ThemeContent.jsx import React from "react"; const ThemeContext = React.createContext(); ThemeContext.displayName = "ThemeContext"; export default ThemeContext; src > chapter_14 > MainContent.jsx import {useContext} from "react"; import ThemeContext from "./ThemeContext"; function MainContent(props) { const {theme, toggleTheme} = useContext(ThemeContext); return ( 안녕하세요, 테마 변경이.. 2023. 4. 25. [React] Card 컴포넌트 만들기 ✔ Card 컴포넌트 만들기 src > chapter_13 > Card.jsx function Card(props) { const {title, backgroundColor, children} = props; return ( {title && {title}} {children} ); } export default Card; src > chapter_13 > ProfileCard.jsx import React from "react"; function FancyBorder(props) { return ( {props.children} ); } export default FancyBorder; index.js 고치고, npm start ? 2023. 4. 24. [React] Composition 방법과 Inheritance ✔ Composition : 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 ① Containment - 하위 컴포넌트를 포함하는 형태의 합성 방법 ⁎ Sidebar 나 Dialog 같은 Box 형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없다. children prop 을 사용한 FancyBorder 컴포넌트 function FancyBorder(props) { return ( {props.children} ); } WelcomeDialog 컴포넌트 import React from "react"; import FancyBorder from "./FancyBorder"; function WelcomeDialog(props) { return ( 어서오세요! 우리 사이트에 방문하신 것을 환.. 2023. 4. 24. [React] Shared State (섭씨 화씨 변환기 만들기) ✔ Shared State : State 에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 경우 하위 컴포넌트가 공통된 부모 컴포넌트의 state 를 공유하여 사용하는 것 하위 컴포넌트에서 State 공유하기 - 물의 끓음 여부를 알려주는 컴포넌트 import React from "react"; function BoilingVerdict(props) { if (props.celsius >= 100) { return 물이 끓습니다.; } return 물이 끓지 않습니다.; } export default BoilingVerdict import React, {useState} from "react"; import BoilingVerdict from "./BoilingVerdict"; funct.. 2023. 4. 21. [React] Form을 통해 사용자 정보 입력 받기 ✔ 사용자 이름 받기 src > chapter_11 > SignUp.jsx import React, { useState } from "react"; function SignUp(props) { const [name, setName] = useState(""); const handleChangeName = (event) => { setName(event.target.value); }; const handleSubmit = (event) => { alert(`이름: ${name}`); event.preventDefault(); }; return ( 이름: 제출 ); } export default SignUp; index.js 수정 후, npm start 이름을 입력해서 제출하면 알림이 뜬다. ✔ 사용자 성별.. 2023. 4. 21. 이전 1 2 3 다음 반응형
