목록React (19)
HYEWON JUNG의 개발일지
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dldIoR/btszYlIUiO1/8muB0GHiYW6gCssB0Azzvk/img.gif)
useState 가장 기본적인 react hook 이며 함수형 컴포넌트 내에서 가변상태를 갖게 한다. const [state, setState] = useState(초기값); 이런 기본 형태에서 리렌더링을 하려면 setState를 이용해서 해야하는데 전에 count를했었는데 당시에 사용한 방식은 2023.11.01 - [React] - state , state와 불변성, 전개구문을 이용한 불변성 유지 state , state와 불변성, 전개구문을 이용한 불변성 유지 state를 쓰는 이유 UI를 바꾸기 위해서다, 렌더링을 다시하기 위해서 const [state, setState]= useState('initial Value') 배열 안의 'state'는 초기값을 받을 변수, 'setState'는 변수를 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/kxvMB/btszXZrUTMN/gSCzpQ6Its3rFBls7NYfp1/img.png)
GlobalStyle GlobalStyle은 전역스타일링으로 코드 전체에 공통된css를 적용할 때 쓰인다. 적용 방식은 편하게 파일(컴포넌트)을 새로 생성해준 후 const GlobalStyle = createGlobalStyle` body{ font-family: "Helvetica", "Arial", sans-serif; line-height: 1.5 } `; 컴포넌트와 비슷하지만 ``사이에 body태그 넣고 {} css를 객체안에 적어준다. import 해와서 JSX상단에 넣어주면 된다. import { createGlobalStyle } from "styled-components"; export default GlobalStyle; import GlobalStyle from './GlobalSty..
styled components란 ? 기본의 css는 태그의 인라인으로 하거나, css파일을 따로 만들어서 구현을 했었는데js파일에서 styledcomponent를 이용하는 방법도 있다. styledcomponent는 리액트의 고유 기능은 아니고 package로 다운을 받아야하는데 적용 방법은 1.vscode 확장에서 vscode- styled-components 를 설치해준다. 2. 터미널을 열어서 'yarn add styled-components'를 입력해 설치해준다. 3. package.json에서 styled-components 가 추가된 걸 확인한다 4. js, jsx파일에 import styled from 'styled-components'; 해준다. 이렇게 하면 세팅이 끝난다. styled ..
1. 단순 컴포넌트 반복 => map()사용하기 function App() { return ( 감자 고구마 오이 가지 옥수수 ); } (1)중복된 컴포넌트 안에 있는 요소들로 배열을 만들어주기 (2) map()을 이용하여 새로운 배열 내뱉기 function App() { let guhwang = ['감자', '고구마', '오이', '가지', '옥수수'] return ( {guhwang.map((item)=>{return {item}})} ); } 2. 배열안 객체 처리하기 let users = [ { id: 1, age: 30, name: "송중기" }, { id: 2, age: 24, name: "송강" }, { id: 3, age: 21, name: "김유정" }, { id: 4, age: 29, n..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/pfRDl/btszCkwkGZV/N3KkWhiRXjxcRJagnUt5k1/img.png)
state를 쓰는 이유 UI를 바꾸기 위해서다, 렌더링을 다시하기 위해서 const [state, setState]= useState('initial Value') 배열 안의 'state'는 초기값을 받을 변수, 'setState'는 변수를 제어할 메소드 , 'initial Value'는 초기값 state를 input에 준다고 했을 때 input 입력값에 따라 state를 변경하려면 하고 밑에 {ID} 로 나타낼 곳에 넣어주면 되겠죠 불변하다, 가변하다 참고할 것. 2023.10.27 - [JavaScript] - 데이터 타입 > 얕은 복사 , 깊은 복사 데이터 타입 > 얕은 복사 , 깊은 복사 데이터 타입 기본형 Number String Boolean Null undefined symbol 참조형 > ..
props = 컴포넌트끼리 정보/데이터 교환 방식= 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터 1. props는 반드시 부모에서 자식으로만 흐른다. 2. props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다. function Child(props){ return내가{props.GrandFa2} 손자다 } function Parents(props){ // console.log("props", props.GrandFaName) 확인 const GrandFa = props.GrandFaName; return } function GrandFa(){ const name = "할아버지" return } function App(){ return } 위 예제로 보면 GrandFa..