본문 바로가기
반응형

전체 글354

[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.
[React] List 와 Key 를 사용하여 출석부 출력하기 src > chapter_10 > AttendanceBook.jsx import React from "react"; const students = [ { name: "Yeeun" }, { name: "Heongmin" }, { name: "Hyungyu" }, { name: "Kangin" }, ]; function AttendanceBook(props) { return ( {students.map((student) => { return {student.name}; })} ); } export default AttendanceBook; index.js 수정 위와 같이 잘 출력된다. 근데 콘솔창은 난리났다. key 값을 안 줘서 그렇다. import React from "react"; const stude.. 2023. 4. 20.
[React] 여러 개의 Component 렌더링 하기 ✔ List : JavaScript 의 변수나 객체들을 하나의 변수로 묶어 놓은 것 const numbers = [1, 2, 3, 4, 5]; ✔ Key : 각 객체나 아이템을 구분할 수 있는 고유한 값 / 아이템들을 구분하기 위한 고유한 문자열 리액트에서의 Key 값은 같은 List 에 있는 Element 사이에서만 고유한 값이면 된다. ✔ List 와 Key 를 이용하여 여러 개의 Component 렌더링 하기 위 사진에서 A 라는 컴포넌트와 B 라는 컴포넌트가 반복되고 있는 것을 볼 수 있다. 이렇게 같은 컴포넌트를 화면에 반복적으로 나타내는 경우에 사용하는 것이 자바스크립트 함수 map() 이다. 자바스크립트에서의 map() const doubled = numbers.map((numebr) => .. 2023. 4. 20.
[React] 로그인 여부를 나타내는 툴바 만들기 src > chapter_09 > Toolbar.jsx import React from "react"; const styles = { wrapper: { padding: 16, display: "flex", flexDirection: "row", border: "1px solid grey", }, greeting: { marginRight: 8, }, } function Toolbar(props) { const { isLoggedIn, onClickLogin, onClickLogout } = props; return ( {isLoggedIn && 환영합니다!} {isLoggedIn ? ( 로그아웃 ) : ( 로그인 )} ); } export default Toolbar; src > chapter_09 >.. 2023. 4. 20.
[React] Conditional Rendering ✔ Conditional Rendering (조건부 렌더링) : 어떠한 조건에 따라서 렌더링이 달라지는 것 function UserGreeting(props) { return 다시 오셨군요!; } function GuestGreeting(props) { return 회원가입을 해주세요.; } 위 코드는 각각 회원, 비회원에게 보여줄 함수 컴포넌트이다. function Greeting(props) { const isLoggedIn = props.isLoggedIn; if(isLoggedIn) { return ; } return ; } 로그인 여부에 따라 다른 문구가 뜨는 Greeting 함수이다. • Truthy : true 는 아니지만 true 로 여겨지는 값 • Falsy : false 는 아니지만 f.. 2023. 4. 20.
[React] 클릭 Event 처리하기 ✔ 클릭 Event 처리하기 src > chapter_08 > ConfirmButton.jsx import React from "react"; class ConfirmButton extends React.Component { constructor(props) { super(props); this.state = { isConfirmd: false, }; this.handleConfirm = this.handleConfirm.bind(this); } handleConfirm() { this.setState((prevState) => ({ isConfirmd: !prevState.isConfirmd, })); } render() { return ( {this.state.isConfirmd ? "확인됨" : ".. 2023. 4. 20.
반응형

티스토리툴바