솔적솔적

Store.js를 빼다가 쓰는 법을 알아보자. 그전에 저번 시간에 말했던 것 복습. Redux를 왜 사용하는가. 👉 이유는 컴포넌트간에 state공유가 불편할 때 사용한다. redux를 사용하면 redux store.js통 안에 state들을 다 넣고 빼서 사용할 수 있기 때문이다. 그럼 props전송이 필요없는 이점이 있기 때문. 리덕스 스토어안에 있던 스테이트들은 모든 컴포넌트들이 직접 통신을 해서 store.js안에 있는 state을 가져가서 쓸 수 있으니 props전송을 안해도된다는 것! 그럼 이 store.js 파일에다가 state만드는 법을 알아보자. 일단 Store.js 파일안에다가 createSlice() 쓰고 import해야한다. useState와 비슷한 용도임 store.js impor..

지금까지 개발하면서 느끼셨겠지만 리액트는 Single Page Application임으로 개발 시 단점이 많이 보이게되는데 그 단점은 state간의 공유가 참으로 어렵다는 사실, state를 갖다 쓸 수 있는 방법은 부모 컴포넌트 👉 자식 컴포넌트로 전달하기 위해서 props 전송을 해야한다는 것. 그래, props가 있다, props를 사용하면되겠지. 근데! data라는 state를 DetailContent컴포넌트에서 사용하려할 때 중간의 Detail 컴포넌트를 건너 뛰어서 사용할 수 없다는 불편함이 있다. 예를들어 컴포넌트가 20번 중첩이 된다면 props를 10번 이상 입력해야하는데, 이것에 대해 방지할 수 있는 방법2가지가 있다. 첫 번째 방법은 리액트 기본 문법인 Context API 를 사용하..

안녕하세요, 오늘은 Component문법을 사용하여 모달창을 만드는 방법을 알아가봅시다. ​ 1. 모달창 만들기 1. 작성한 글 바로 밑에 로 하나의 영역을 만들기 2. 안에 작성할 내용 넣기 3. App.css 디자인 근데, 이 모달을 한 번만 하진 않을텐데 계속 div를 만들면 헷갈리고 복잡하지 않을까? 그래서 리액트에서는 그 문제를 간편하게 만들 수 있는 방법, HTML를 한 단어로 축약할 수 있는 Component문법을 방법을 사용한다. 내가 정하고 싶은 단어로 정해서 한 줄로 넣어놓을 수 있다. 아범은 Model이라고 했지만 명을 어떻게 지어도 무관하다는 것. ​ 4. function APP의 return 부분 괄호까지 끝나는 부분쯤에 Component를 만든다. 이것이 컴포넌트 문법이다. 1...

안녕하세요, 이번에는 쇼핑몰이나 인스타그램에서 자주 보이는 좋아요 버튼을 만들어 볼 예정이예요. 클릭하면 숫자가 증가하는 버튼을 만들려하는데, 리액트로는 어떻게 만들어질까요? 차근히~ 알아가보죠! ​ (저번시간에 만든 App.js 파일 그대로 사용합니다.) 먼저 화면상에 클릭버튼 만들기. (아범은 누르는 버튼을 이모티콘으로 가져왔습니다.) 1. 클릭 시 숫자 증가하는 버튼 만들기 이 태크안에 클릭 이벤트를 넣어주고 클릭 시 실행될 함수를 넣어줘야한다. onClick={ 클릭될 때 실행할 함수 } ⇒ onClick={ ()⇒{실행할 내용} } ​ 그럼 처음 초기값은 0으로 셋팅을 하고 클릭 시 숫자가 변하는 방법을 써야한다. state를 이용해 변경을 하는 것이다. 이렇게 기존에 선언한 '좋아' 변수를 클..