개발자 페이지/React JS, Next JS (14) 썸네일형 리스트형 Typescript / interface 기능 자바스크립트에서 추가로 사용가능한 타입스크립트는 꼼꼼한 변수 타입 체크로 해당 변수가 String, number, boolean... 등 값이 맞는지 확인하여 사전에 경고를 줌으로써 개발자들의 오류 가능성을 최대한 배제시켜주는 고마운 기능임과 동시에 모든 변수에 값을 사전에 지정해줘야 하기 때문에 상당히 귀찮은 면모도 가지고 있다. 그럼에도 불구하고 Typescript는 error 발생시 어디에서 누가 문제가 되었는지 좀 더 정확히 알려주기 때문에 결과적으로 개발에 소요된 시간을 줄이는 결과를 보여준다. 위의 예시는 "interface Name {}"을 사용하여 각 form에 들어가는 값들의 타입을 지정해둔것으로 required가 아닌것은 변수 뒤에 "?"를 추가해주어야 한다. 예를 들어 lastName.. React JS / VScode for React, Prettier 세팅하기(Javascript, Vanila JS, React) VScode 사용자들은 Prettier의 편리함에 익숙할 것이다. (Javascript) Vanila JS만 공부하다가 이번에 React JS를 같이 보는데 React JSX 라는 좀더 단순하고, 새로운 방식의 코드 작성법을 만나는 순간 같이 찾아온 "Error"아닌 Error.. 기존 Prettier는 예로 "h1"을 한번 치면 아래와 같이 자동으로 태그를 완성해주었다. 그런데 ReactJS에서는 이 완성기능이 온전히 작동을 하지않고 ( 시작 태그를 쓰면 닫아주긴 한다...) 그래도 시작태그만 적으면 자동으로 닫아주니 참고 쓰려했는데 input 같은 태그들은 엉뚱하게 먹히는 문제를 직면한다. 예를들어, 을 작성하면 아래와 같이 이상하게 tag를 닫아버리기 시작한다. input 태그는 link, img .. React JS / to do list_Practice 1. const [] = useState("); 는 자주 쓰이게 될 기본 코드이다. 첫번째 값 = default 두번째 값 = modify default useState() 괄호 안의 값은 default 값을 의미. 2. setToDos((currentArray)) => [toDo, ...currentArray]); currentArray는 임의로 명명한 값으로 어떤 값을 넣어도 상관없다. 뒤에 대괄호 안에 (...)은 currentArray의 모든 값을 나타내는 의미로 바로 앞에 toDo값에 이어서 currentArray의 값을 이어 붙인다는 뜻으로 사용된다. toDo.push()와 같다. import { useState } from "react"; function App() { const [toDo,.. React JS / useEffect() 다양한 표기 방법 아래 useEffect function 사용의 2가지 방법이며, 그 기능은 동일하다. 보통 2번째 function() {} 보다는 화살표 function인 () => {} 을 주로 사용한다. function Hello() { useEffect(() => { console.log("hi :)"); return () => console.log("bye :("); }, []); useEffect(function () { console.log("hi :)"); return function () { console.log("bye :("); }; }, []); return Hello; } React JS / Render 방식 1. 아래 함수에서 [value, setValue] 는 value=Defult , setValue=함수 로 이뤄져있다. 2. 만약 부모에 어떤 state 변경이 있다면, 모든 자식들은 Re-render가 된다. (value or setValue에 변경이 생긴다면 return 값이 모드 Re-render가 되는것을 이해한다. 그리고 이 특성이 추후 어플리케이션 속도가 느려지는 원인이 될 수 있다. 아래는 2개의 MemorizedBtn Components 가 있지만 천개의 Components가 있다면 이것들을 Render할 필요가 없음에도 자동 Render시키기 때문에 속도 저하의 원인이 된다.) function App() { const [value, setValue] = React.useState("Sav.. React JS / Converter 1. React.useState() : const [] 의 Array 내부의 프로퍼티는 [Default, modifier]로 나눌수 있다. 2. script src =" unpkg... " 링크를 통해 React JSX 라이브러리 사용 가능 3. disabled 값은 true 일때 활성화, false일때 비활성화 . onClick={onFlip} 을 통해 위 값을 버튼을 통해 Flip 하는 방식) 4. setFlipped((current) => !current); 코드는 setFlipped(!flipped)에서 개선된 코드이다. 5. input의 value={flipped} 에서 value값 flipped는 Default 값인 False 가 onFlip function을 통해 그 값이 바뀐다. 6. co.. 이전 1 2 다음
