728x90 반응형 React30 [React] 폼 다루기 영어를 소문자로 입력해서 제출했을 때 화면에는 대문자로 보이는 기능을 구현해 볼 것이다. 화면에서 동적으로 관리할 때는 상태를 사용해야하기에 input에 상태를 추가해볼 것이다. input에 onChange 이벤트 추가해서 입력값이 잘 들어오는지 확인해볼 것이다. onChange는 Input자체의 event를 listen하는 역할을 하고, input에 값이 바뀔때 마다 함수 호출되는 내장 API이다. 우리가 작성한 js를 통해 변화가 일어났는지 탐지한다. https://kkamikoon.tistory.com/153 [Javascript] onchange 이벤트로 내용 변경 감지 01. onchange 함수 문법 onchange 함수는 우리가 작성한 Javascript를 통해 변화가 일어났는지 탐지해줍니다.. 2022. 3. 23. [React] useState 초기값에 배열을 넣기! 버튼을 눌렀을 때 사진이 하나 더 추가 되는 기능을 구현해볼 것이다. 버튼을 누르는 함수가 MainImage에 있는데 이걸 부모 컴포넌트인 App에 옮겨주고 MainImage에서는 props로 받아주는 형식으로 진행해볼 것이다. MainImage 컴포넌트에 handleHeartClick prop으로 handleHeartClick이라는 변수가 들어간다. 그러면 MainImage prop에 handleHeartClick을 매개변수로 설정해주면 된다. MainImage는 prop으로 img와 handleHeartClick을 둘다 받아오게 된다. 초기상태에는 사진이 2개인데 버튼을 누르면 사진이 한개 더 추가가 될 것이기 때문에 useState에 배열이 들어갈 수 있다! (초기 사진 2개를 배열에 넣어줌) 버튼.. 2022. 3. 22. [React] 리스트 자바스크립트에서 배열을 순회하는 메서드인 map을 이용한다. 이 Images라는 컴포넌트에 blueImg1이 첫번째 ImageFrame 컴포넌트의 props로 들어가려하고 (빨간펜) blueImg2가 두번째 ImageFrame 컴포넌트의 props로 들어가려 한다.(파란펜) 이런 상황에서 링크를 하나하나 써주는건 매우 비효율적이기 때문에 자바스크립의 map을 활용할거다! blueImg1과 blueImg2를 담는 리스트인 blue를 만든 후 하나씩 뽑아서 ImageFrame에 img props로 들어간다. 근데 약간 문제점이 있다. 콘솔을 보면 Each child in a list should have a unique "key" prop 에러가 뜬다. 이건 배열을 순회할 때 배열마다 고유한 id값이 필요하.. 2022. 3. 21. [React] useState로 상태만들기 / 상태 끌어올리기 useState는 뭘까? 리액트에서 상태를 바꿔줄 때 useState를 사용한다. useState 괄호 안의 값은 초기값을 의미한다. 1을 초기값으로 설정해준 것. counterState는 두개로 나뉘는데 useState의 첫번째 인자는 counter 그 자체이고 (counter에 useState의 초기값 들어감) useState의 두번째 인자는 setCounter인데 얘는 counter를 조작하는 역할을 한다. setCounter는 counterState의 두번째 인자며, counter를 조작하는 역할을 한다. setCounter 함수를 통해 counter를 바꿀 수 있다! https://www.daleseo.com/react-hooks-use-state React Hooks: useState 사용법 .. 2022. 3. 20. 이전 1 ··· 3 4 5 6 7 8 다음 728x90 반응형
