본문 바로가기
반응형

Front/React33

[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.
[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.
[React] 다양한 Forms ✔ Textarea 태그 : 여러 줄에 걸쳐 긴 텍스트를 입력받기 위한 HTML 태그 • HTML textarea 태그 안녕하세요, 여기에 이렇게 텍스트가 들어가게 됩니다. • React textarea 태그 import React, {useState} from "react"; const styles = { text : { padding: 10, margin: 10, fontSize: 20, color: "green", fontWeight: "bold", border: "3px solid black", borderRadius: 10, width: 500, height: 100, } } function RequestForm(props) { const [value, setValue] = useState('요.. 2023. 4. 21.
[React] Form 과 Controlled Component ✔ Form : 사용자로부터 입력을 받기 위해 사용한다. ✔ Controlled Components : 값이 리액트의 통제를 받는 Input Form Element (사용자의 입력을 직접적으로 제어할 수 있다.) 사용자의 이름을 받는 컴포넌트를 Controlled Components 를 이용하여 만들기 function NameForm(props) { const [value, setValue] = useState(''); const handleChange = (event) => { // event.target.value : 해당 target 의 value 속성의 값 // 여기서 target 은 input element 임 setValue(event.target.value); } const handleSub.. 2023. 4. 20.
반응형

티스토리툴바