![]()
읽기전용(read only) // TODO: 1) 읽기 전용(readonly) : 값 수정 불가 interface IHello { readonly name: string } let val: IHello = { name: "hello"}; // 초기값 정의 // val.name = "hello2"; // 변경불가 (readonly) 튜플(tuple) // TODO: 2) 튜플(tuple) : 정해진 자료형의 고정된 크기의 배열 let tuple: [string, number] = ["a", 1]; console.log("tuple", tuple); // tuple = ["a", 1, 2]; // 값이 3개가 들어와서 에러 // tuple = [1, "a"]; // 자료형 순서가 맞지 않음 에러 enum :..
![]()
typescript에서의 함수 정의 // Func.tsx import React from "react"; import { useState } from "react"; function Func() { // TODO: 변수 정의 let [name, setName] = useState(""); let [message, setMessage] = useState(""); // TODO: 함수 정의 : 타입스크립트 적용 // 매개변수 2개를 전달받아 message 변수에 저장하는 함수 // getInputVal("안녕하세요", 2023) // TODO: 사용법 : const 함수명 = (매개변수: 자료형, ...): 리턴자료형 => {} const getInputVal = (arg: string, year: num..
![]()
VS code에서 타입스크립트 프로젝트 생성방법 폴더 생성 후 폴더 안에서 터미널 실행 터미널에 npx create-react-app 프로젝트명 --template typescript 명령어 입력 생성이 완료되면 리액트 서버 실행명령어 입력 npm start typescript? 자바스크립트는 자료형을 정의하지 않고 자유롭게 변수에 값을 넣어 코딩이 가능합니다. 즉, 코딩이 간략하고 코딩생산성이 증가하지만 코딩시 에러를 잡지 못하고 서비스때 심각한 오류가 발생합니다. 즉 자바스크립트의 자료형을 명시해서 코딩하게 해주는 JS의 확장 언어를 타입스크립트라 합니다. // Basic.tsx : 자식 컴포넌트(typescript 적용된 버전) // rfce import React, { useState } from..
![]()
React.memo 컴포넌트, 변수, 함수 등을 재렌더링 할 때 제어가 필요한 경우 메모이제이션을 수행합니다. 메모이제이션이란 이전 처리 결과를 저장해둠으로써 처리속도를 높이는 기술입니다. 즉, 필요할 때만 다시 계산하게 하여 불필요한 처리를 줄입니다. 컴포넌트를 메모이제이션해서 부모 컴포넌트가 재렌더링되더라도 자식 컴포넌트의 재렌더링을 방지합니다. 리액트 내의 memo를 사용하며 import를 해주어야 합니다 사용법은 컴포넌트 함수 전체를memo() 로 감싸면 됩니다. [App.js] import { useState, memo } from "react"; import { Child1 } from "./components/Child1"; import { Child4 } from "./components/..
![]()
State 리액트에서는 화면에 표시하는 데이터나 길이가 변하는 상태 등을 모두 State로 관리합니다. 웹 애플리케이션을 만들 때 화면은 다양한 상태를 가집니다. 예시는 다음과 같습니다. 에러가 있는가? 모달 창을 열고 있는가? 버튼을 클릭했는가? 텍스트 박스에 무언가를 입력했는가? 이와 같이 '상태'는 모두 State로 관리하며 이벤트가 실행되는 경우 등에 업데이트 처리를 수행함으로써 동적 애플리케이션을 구현합니다. useState useState는 리액트 안에서 제공되므로 사용할 때는 import해야 합니다. import { useState } from "react"; useState 함수 반환값은 배열형태로 되어 있습니다. 첫번째에 State 변수, 두번째에 State를 업데이트하기 위한 함수가 설..
![]()
ul-li 태그 반복하여 출력하기 function H_Book() { const students = [ { id: 1, name: "Inje", }, { id: 2, name: "Steve", }, { id: 3, name: "Bill", }, { id: 4, name: "Jeff", }, ]; // 변수정의 const [student, setStudent] = useState(students); return ( {/* 반복문 : 여기서 돌리면 됨 */} {student.map((value, index) => { return ( {value.name} ); })} ); } export default H_Book;
![]()
아래 변수에 값이 있다. isFull 이 true 이면 정원이 가득찼습니다. 아니면 입장할 수 있습니다. 를 출력하세요. import React from "react"; import { useState } from "react"; function E_ComfirmButton_Exam() { let [isFull, setIsFull] = useState(false); const display = () => { setIsFull(true); }; return ( {(isFull === true) ? ( 정원이 가득찼습니다. ) : ( 입장할 수 있습니다. )} ); } export default E_ComfirmButton_Exam; 아래 변수 count 에 9 의 값이 있다. 10을 초과하면 ( count..
![]()
# TODO 아래 버튼을 클릭하면 문구가 확인하기 -> 확인됨으로 바뀌게 하고 버튼 상태를 비활성화 시켜보자. #1 버튼의 상태를 변경할 변수값 선언 // TODO: 변수정의 let [isConfirmed, setIsConfirmed] = useState(false); #2 버튼을 누르면 문구변경 / 상태변경 함수 정의 // TODO: 함수정의 const handleConfirm = () => { setIsConfirmed(true); } #3 문구부분을 삼항 연산자를 사용하여 변경 return ( { (isConfirmed === true)? "확인됨" : "확인하기" // button의 문구부분 -> 삼항연산자 사용 } )
![]()
// TODO : 연습문제 ) 아래 소스를 완성하세요 // 버튼을 클릭하면 isTable 변수의 값을 true 로 바꾸고, // 아래 내용을 담고 있는 테이블 태그로 // 화면에 보이게 만드세요. // (부트스트랩 테이블 디자인을 활용하세요.) // 테이블 내용 : // No Dname Loc // 1 Sales 부산 // 2 Development 서울 #1 테이블 보이게/안보이게 하기 위한 isTable의 변수 값을 지정 let [isTable, setIsTable] = useState(false) #2 태그부분에 논리연산자를 입력하여 true 값이면 보이게하기 return ( 테이블 보이기 {isTable && // isTable 이 true 이면 아래 태그 출력 No Dname Loc 1 Sales..
![]()
기존 for문 기존 배열을 정의하고 for 문을 사용하여 출력할 수 있습니다. const numArr = [1, 2, 3, 4]; // for문을 이용한 배열 처리 for(let i = 0; i {}); .map( ) 괄호 안에 함수를 입력합니다. 함수는 임의의 이름을 붙인 인수를 받을 수 있고 거기에 배열의 값이 들어갑니다. 그리고 반환하는 요소를 함수안에서 return 합니다. const numArr = [1, 2, 3, 4]; // 인수 num에 배열의 값이 저장되고 return 으로 반환 const numArr2 = numArr.map((num)=>{ return num; }); console.log(numArr2); // [1, 2, 3, 4] 이 상태는 numArr2에 numArr을 그대로 저..
![]()
// TODO : 연습문제 아래 데이터를 반복문으로 출력하세요 // CommentList_Exam2.js // TODO : 연습문제 아래 데이터를 반복문으로 import React, { useState } from "react"; import "../assets/styles.css"; function F_CommentList_Exam2() { // TODO : 연습문제 아래 데이터를 반복문으로 // 출력하세요 const initialWebtoons = [ { name: "햄스터와 그녀", link: "https://webtoon.kakao.com/content/%ED%96%84%EC%8A%A4%ED%84%B0%EC%99%80-%EA%B7%B8%EB%85%80/1625", img: "http://t1.da..
![]()
// TODO : image 는 img 태그의 src 에 넣고, link 주소는 a href 속성에 넣어서 출력하시요 // TODO : isUpdate 가 true 이면 화면에 "true" 라고 출력하고, false 이면 "false"라고 출력하세요. import React, { useState } from 'react' import "../assets/styles.css"; function C_Comment_Exam2() { // TODO : useState 이용 4가지 변수 넣기, Comment_Exam2.css import // name="제목" // link="http://www.naver.com" // img="https://upload.wikimedia.org/wikipedia/commons/..
