리액트4 [타입스크립트] [리액트] 객체배열 State 사용해보기. 오늘의 목표 이름과 나이를 적은 후 입력 버튼을 누르면 Result에 추가되도록 하는 것입니다. Result로 사용 될 PersonInfoArray state는 사람의 정보를 담은 배열 입니다. 시작! 1. State를 선언한다. const [name, setName] = useState(""); const [age, setAge] = useState(); const [personInfoArray, setPersonInfoArray] = useState([]); name은 useState의 초깃값으로 빈문자열 ""을 주어 string 타입을 묵시적으로 선언하였습니다. age는 useState메소드에 제네릭(표기)을 사용하여 number 타입.. 2022. 5. 15. [리액트] setState() 함수도 비동기라는 것을 잊지 말 것. 자바스크립트는 비동기적으로 실행됩니다. setState() 함수도 자바스크립트 함수이므로 비동기적으로 실행됩니다. 이 점을 유의하지 않으면 어떻게 되는지 알아보겠습니다. [계획] 1. 오른쪽의 Add 버튼을 누른다. 2. First Element의 값이 1 증가한다. 3. Second Element는 First Element의 값을가져온다. [코드] const [firstEle, setFirstEle] = useState(0); const [secondEle, setSecondEle] = useState(0); firstElement와 secondElement 값을 useState()를 이용해 초기화합니다. First Element: {firstEle} Add +1 (First Element) & tri.. 2022. 5. 8. [리액트] (getElementById(), useRef()를 대체할) useState 써보기. 위와 같이 input 박스에 내용 입력 후 출력 버튼을 누르면 결과가 표시되게 만들것입니다. 세가지 방법을 사용하여 만들어 볼것인데 1, 2, 3번 방법순으로 좋은것 같아요.(3번이 좋음) 방법1. getElementById()를 쓴다. function App() { const checkValue = () => { const result = document.getElementById("inputText").value; document.getElementById("result").textContent = result; } return ( 출력 Result: ); } 네 위와 같이 출력버튼을 누르면 document.getElementById("inputText").value로 값을 찾아 올수있습니다. 찾아온.. 2022. 5. 2. [리액트] 타입스크립트(.tsx)에서 콤포넌트 간 속성값 주고받기. TSX문법을 사용하면 JSX코드를 그대로 사용하지 못하는 경우가 있다. 콤포넌트에 속성을 할당하려 하였다. 그러나 '타입이 곤란하여 할당 할 수 없습니다.' 라는 에러가 발생하였다. TSX에서 콤포넌트 간 속성값 주고받는 법을 알아보겠다. 1. 콤포넌트 타입선언 콤포넌트를 만들 때 해당 콤포에서 props로 사용코자 하는 모든 속성의 이름과 타입을 선언해주어야 한다. // MonthSelector.tsx ... export interface Props { selectedYYYYMM: string; } ... 2. 콤포넌트 매개변수에 사용할 props를 타입과 함께 선언한다. // MonthSelector.tsx ... const MonthSelector = ({ selectedYYYYMM }: Props.. 2022. 3. 22. 이전 1 다음
