React
-
React에서 map 사용하기React 2022. 10. 29. 16:21
반복되는 html ui를 반복문으로 축약 할 수 있다. 반복문으로 축약하기 전에 javascript 문법 map을 다시 살펴보고 가자 **map() 사용법 [1,2,3].map(function(){ 코드~~ }) array 뒤에 .map()을 붙여주고 뒤에 콜백함수 function()을 붙여주면 1.function 안에 적은 코드를 array 갯수 만큼 반복 해 준다. function안에 작성 한 1이라는 숫자가 array 갯수만큼 3번 반복 되는 것을 확인 할 수 있다. 2. function에 파라미터를 지정 해 주면 파라미터는 array에 담겨 있던 데이터로 꽂힌다. 콘솔창을 확인 해 보면 파라미터를 작성 했기 때문에 array 안에 1,2,3이 순서대로 출력 된 것을 확인 할 수 있다. 3. ret..
-
stateReact 2022. 10. 26. 14:41
state는 변수를 잠깐 저장하는 것이기도 하지만, 특별히 state를 쓰는 이유는 state를 쓰면 html에서 내용이 변경 되면 state로 꽂아 놓은 곳도 자동으로 다시 랜더링 되어서 내용이 바뀌게 된다. **state 사용 방법 useState 작성 후 엔터를 치면 위에 import가 자동으로 되기도 하지만 만약 자동으로 import 되지 않는다면 수동으로 import { useState } from 'react'; 라고 작성 해 주면 된다. 그런 다음 useState를 let, var, const 등에 담아주면 된다. 만약 useState를 배열 형식으로 만들고 사용하고 싶다면 [] 안에 내용을 작성 해 주고 해당 state를 꽂아 줄 때는 사용 할 인덱스 번호를 옆에 작성 해 주면 된다.
-
jsx 문법 3가지React 2022. 10. 25. 13:18
그리고 jsx에서 div에 class명을 선언 할 때는 그냥 class=""가 아니라 className=""으로 선언 해 줘야한다. *** 참고 : css 파일을 쓰려면 상단에 import로 'css 파일경로' 를 작성 해 줘야 한다. jsx에서 주석 처리를 할 때에는 {/**/}의 형태로 해 줘야한다. 반드시 {}로 래핑을 해 줘야한다. 선언 한 변수를 사용 하고 싶을 때는 {} 안에 넣어서 사용 해 주면 된다. 이것을 데이터 바인딩이라고 한다. style을 사용하고 싶을 때도 {}을 사용해서 입력 해 줘도 된다.