state (6) 썸네일형 리스트형 react에서 게시글 생성 실시간 적용하기 현재 진행중인 프로젝트에서 채팅방을 생성한 뒤 지금 생성되어 있는 채팅방 리스트를 확인하는 기능을 구현해야 했다. 나는 아래와 같이 modal창을 이용해서 채팅방을 생성하도록 설정하였기 때문에 채팅방 생성 후 따로 라우팅을 시키지 않는 상태였다. 그래서 채팅방을 생성한 뒤에 별도로 리렌더링해주지 않는 한 아래와 같이 생성된 채팅방을 확인할 수 없었다. 나는 채팅방 정보를 useEffect를 이용해 받아오고 있었기 때문에 아래와 같이 rerender라는 state를 이용해 useEffect가 실행되는 트리거를 만들어 페이지를 리렌더링 해주었다. (참고로 리액트로 만든 SPA는 state가 변경되면 페이지가 리렌더링 된다.) useEffect(() => { axios .get("http://localhost.. ReactJS에서 외부 JSON 파일 불러와서 사용하기 1. 개요 데이터나 컴포넌트 같은 걸 app.js에 다 집어넣으면 코드가 길고 복잡해짐 그래서 따로 파일을 만들어서 불러오기 하면 코드가 간결해지고 가독성이 좋아짐 컴포넌트나 데이터를 담을 js파일 하나 만들고, 코드를 작성한 후 export 외부 파일을 사용할 JS파일에서는 외부 파일을 import 하면 됨 2. 사용법 (1) data.js 일단 data.js파일 하나 만들어봅시다 let data = [ { id : 0, menu : "김밥", price : 1000 }, { id : 1, menu : "떡볶이", price : 1000 }, { id : 2, menu : "만두", price : 1000 } ] // 변수 export // export default 변수명 export default .. ReactJS 필수 개념, props 알아보기 1. 개요 컴포넌트를 만들어서 쓰다보면 다른 컴포넌트에서 만든 state를 사용할 수 없다는 사실을 깨닫게 됨 그럼 모든 컴포넌트에서 같은 state를 쓰고 싶을때 각각의 컴포넌트에다가 state를 선언해야하나? 다행히도 리액트에는 props라는 개념이 존재함 부모 컴포넌트 안에 자식 컴포넌트가 들어있다면, props를 이용해 state를 전달할 수 있음 근데 제한사항이 있어서 자식 컴포넌트끼리 혹은 자식으로부터 부모 컴포넌트에게로의 전달은 불가능 2. 코드 import {useState} from 'react' function App(){ let [글제목, 글제목변경] = useState(['1번제목','2번제목']); return( ) } function Babycomponent(props)){ re.. reactjs에서 반복문으로 HTML태그 만들기 1. 개요 map 함수를 알아야 함 어레이 자료형 뒤에 map()을 붙이면 map()의 콜백함수안에 있는 코드를 어레이 원소 수 만큼 반복해줌 콜백함수에 파라미터 붙이면 어레이 안에 들어있던 값을 순서대로 꺼내줄 수도 있음 마지막으로 콜백함수의 return에다가 뭐 담으면 어레이로 담아줌 [1,2,3].map(function(i){ console.log(i); }) 2. 코드 예를 하나 들어봅시다 import {useState} from 'react'; function App() { let [글제목, 제목바꾸기] = useState(['1번제목', '2번제목']); return ( { 글제목.map(function(a, b){ return( 글번호 : {b+1} {a} ) } } ) } state에 글제.. reactjs 필수스킬, state 변경함수 동작원리 알아보기 1. 개요 state 변경함수는 기존state와 신규state가 동일하면 동작을 안함 이런 특징 때문에 state 변경함수 사용 시 주의사항이 있음 일반적인 문자열이나 숫자 데이터는 그냥 조건 없이 state변경 함수로 state 변경 가능 근데 array랑 object는 저장된 데이터가 아닌, [데이터를 감싸는 괄호]가 state와 연결되는 형태임 그래서 그냥 바꾸면 안되고 [...state명] 형태로 써줘야함 대괄호 열고 점(.) 3개 찍고 state명 입력하고 괄호 닫아줘야 한다는 뜻임 이렇게 하면 array의 괄호를 벗기고 새로운 array를 만들어줌 (기존의 array와 별개의 array가 만들어진다는 뜻) 이거 안하면 기존state와 신규state가 동일한 걸로 인식됨 (괄호 안에 들어있는 데.. reactjs의 꽃, state를 알아보자 1. 개요 state가 뭐냐면 변수랑 거의 똑같음 변수는 수정되어도 html에 바로바로 반영이 안됨(재랜더링 안됨) state는 수정되면 html에 바로바로 반영 됨(재랜더링 됨) 하나의 페이지에서 모든 것을 보여주는게 리액트의 특징임 그래서 페이지 재랜더링 없이도 현재 페이지에서 보여주는 값을 바꿀 수 있어야 하기 때문에 state를 씀 2. state 사용 방법 import {useState} from 'react'; 위 코드를 상단에 적어줘야 함 let [a,b] = useState(데이터); 위 코드를 function 안에다가 넣어주면 됨 그럼 이제 state를 쓸 수 있게 되는 것. a는 변수명처럼 쓰면 되고, b는 state 변경을 도와주는 함수 데이터는 어레이([’ㄱ’, ‘ㄴ’, ‘ㄷ’]) .. 이전 1 다음
