리액트공부

저번시간 강의 숙제. 특정 버튼을 만들어, 누르면 남자코트 -> 여자코트로 내용을 변경하도록 코드 작성.onClick으로 changeTitle() 함수 실행.글제목 array의 0번째에 "여자코트 추천"이라는 글자를 담음.글제목 state의 변경함수 실행. 변경완료.s

function 만들기다른 function 밖에 만들기첫글자 대문자로 만들기return()안에 html 담기<함수명></함수명>쓰기반복적으로 출현하는 html. 코드재사용성 증가.큰 페이지들. 아직 뭔소린지 모르겠음.자주 변경되는 html ui들. 성능상 좋

컴포넌트 간의 값을 주고받기 위해 사용되는 기법.js 파라미터 문법이랑 비슷함.자식 컴포넌트가 부모 컴포넌트에 있던 state를 쓰고 싶으면 그냥 쓰면 안되고 props로 전송해야됨.부모 -> 자식으로 전송은 가능. 자식 -> 부모나 자식 -> 자식은 불가.자식컴포넌트

html css로 ui 미리 디자인.부모컴포넌트에서 받아온 글제목, title을 적절하게 나타내도록 ui를 짜기.현재 ui의 상태를 state로 만들기title state 생성. 기본 0. setTitle로 0을 다른 숫자로 변경 가능.자식 컴포넌트에 props로 글제

input 입력란에 text를 입력. 엔터키를 치면 글제목 배열 state 맨앞에 항목 추가됨.기존 배열에 새 항목을 포함하는 새로운 배열 생성. 앞에 넣으면 앞쪽에 뒤에 넣으면 뒤쪽에 새 항목이 추가된 채로 생성됨.글제목 옆의 삭제버튼 클릭 시, 글제목 배열 stat

특정 상황에 동작하도록 만듦. 클릭 시, 키를 누를 시, 마우스를 올릴 시 등등 많음.하나하나 찾기 어려우니 그때그때 검색하는게 좋을 듯 함.이벤트객체. 현재 발생하는 이벤트와 관련한 유용한 기능들을 제공하는 일종의 변수e.preventDefault() : 이벤트 기본

JSX 중괄호 안에서 for문 사용할 수 없음. 사용하려면 따로 function을 빼서 사용.JSX 중괄호 안에서 사용하려면 map함수 사용.아래는 글제목 array state의 항목 갯수만큼 반복되도록 만든 map 함수임.글제목은 3개의 항목을 가지고 있고, 따라서

입력한 text내용 if문으로 체크. 비어있으면 alert창을 띄우고 글추가를 막음. Date 변수 하나 생성. 현재 날짜를 나타내는 array state 생성. date.toLocaleString()로 현재시각까지 나타냄글 추가 / 삭제하면 따봉도 추가 / 삭제 했듯

옛날에 쓰던 문법. 어차피 지금은 컴포넌트 만들때 함수형태로 만들어서 안쓰는 문법.더 간단하게 정리만 넘어감.클래스명 짓기constructor, super, render 함수 채워넣기.return 안에 html 적기class는 변수, 함수 보관하는 통.기능과 변수를 하

누군가 이미 만들어놓은 예제 코드로 간단하게 레이아웃 / 디자인할 수 있음https://react-bootstrap.netlify.app/ 방문하기Get Started를 눌러 간단 사용법 확인바뀔 수 있으니 그냥 홈페이지에서 확인하는게 더 정확함이후 App.j

css파일에 url 넣어주기html에서 이미지 넣어주기public 폴더 이용하기css파일 안에서 class등으로 스타일을 선언해주고, 거기 안에 이미지 url을 적어준다.App.js에서는 class를 박은 div를 통해 img를 가져옴.이미지 import해오고 html

코드가 길어지면, 단위별로 잘라내어 파일을 따로 만들고, 불러오는 식으로 하는게 이쁘다.여기서 사용되는 것이 import / export.저장되어있는 코드를 내보낼때 사용됨. data.js 라는 파일이 따로 있고 거기 안에 변수 하나가 있다 가정해봄.다른데 저장되어있는

온라인 강의를 들으면서 차근차근 react를 배워가고 있다.숙제가 하나 있었는데, 대충 쇼핑몰의 상품을 나타낼 Card 컴포넌트 만들기였다.data가져오기컴포넌트 생성props를 이용하여 값 넘기고 받아오기강의자료로 올라온 data를 따로 src폴더에 js파일로 빼두고

route : 경로.라우팅(영어: routing)은 어떤 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정이다. 출처 위키피디아.대충 다른 페이지로 이동하는 방법 쯤으로 생각함.react는 쌩 html css js랑 달리 하나의 html파일만 있고,

저번 글에 이어서, 리액트 라우터의 몇가지 기능에 대해 좀더 적어봄.정확하게는, 강의를 듣고 내용을 한번 더 정리하기 위한 글.리액트 라우터의 함수.Link태그 말고, 다른 방법으로 url 접속을 해줌.useNavigate를 사용하여 navigate 변수 생성.버튼 등

url 경로에 적은 데이터를 페이지끼리 주고받는 방법에 대해 정리1\. url Parameter2\. userParamsurl에 사용자가 적은 데이터.문자가 될수도 있고, 숫자가 될 수도 있는데, 아무튼 그걸 가지고 지지고 볶는건 개발자의 몫.이렇게 쓰면, /:특정문자

리액트 외부 라이브러리. js파일 스타일링에 도움을 줌고유한 문법으로 js파일에 컴포넌트를 제작. css안쓰고 html 스타일링을 가능하게해줌.props문법 / 다른 js에서 컴포넌트 import등으로 유용한 사용가능.스타일링에 프로그래밍문법 적용가능. (백그라운드 컬

컴포넌트의 라이프사이클(렌더링/재렌더링/삭제) 중에 내가 원하는 코드를 집어넣을수있다.대표적으로 컴포넌트 렌더링/재렌더링/삭제시 실행되는 코드를 만들수있다.useEffect : 리액트 훅(함수 / 기능). 사이드이펙트에서 따온 이름. 컴포넌트 렌더링/재렌더링시 실행되는

react useEffect 2

비동기통신 : 브라우저의 새로고침없이 데이터를 불러오는 행위.대표적인 예로는 아이디 중복체크가 있음.화면은 그대로 놔둔채로 서버에 값을 요청하여 특정기능을 수행하게 해줌.서버에특정 url로 특정요청(get post등)을 보내게되면 서버는 미리 정해둔 약속에 따라(api

어제에 이어 react 비동기통신 정리 2탄.원래 서버와 문자자료만 주고받을 수 있음 object/array 이런거 못주고받음.근데 object/array 자료에 따옴표를 쳐놓으면 받을수있음.이걸 JSON 이라고 함.JSON은 문자 취급을 받기 때문에 서버와 자유롭게

동적인 ui 3스텝 따라가기.html css로 디자인 미리 완성해놓고react bootstrap 활용해서 ui설계UI의 현재 상태를 저장할 state 하나 만들고3개이상의 탭. 숫자로하면 될듯.state에 따라서 UI가 어떻게 보일지 작성.컴포넌트 하나 작성. prop

버튼을 누를때마다 클래스명을 떼었다 붙여야함렌더링될때마다 붙이고, 재렌더링 될때마다 떼줘야함\->useEffect활용. 클린업 펑션 추가해서.리액트 18버전 이상부터는 automatic batch 라는 기능이 생김.state 변경함수들이 연달아서 여러개 처리되어야한다면

props를 대체하여, 컴포넌트간의 state 전송을 원활하게 해주는 리액트 기능.일종의 state 보관함Context로 원하는 곳을 감싸고 공유를 원하는 state를 value 안에 다 적으면 끝export해주고, 필요한 곳에서 importstate 변경시 쓸데없는

리액트 라이브러리state를 한곳에 모아둔다.서로 다른 컴포넌트들 간의 state공유가 쉬워진다.프로젝트에 npm으로 최신버전 설치설치 및 기본셋팅 끝!

redux로 state 보관하고 쓰는 법저번 정리글에 이은 2번째 redux 정리글.props전송없이 컴포넌트간 state전송을 위해.jsx파일 하나 파서, redux를 통해 컴포넌트 간 공유가 필요한 state들을 모아두면 props롤 일일이 전송할 필요없이 공유가

저번 글에 이어 redux 정리글.redux에 저장한 state를 수정하는 방법 정리.state변경해주는 함수 작성 및 export공유 state를 필요로 하는 컴포넌트에서 import.dispatch() 필수.이렇게 나뉘는데, 좀 더 세분화해서(강의에서 알려준대로)

store에 저장된 state가 array, object 자료인 경우 state 변경을 좀 쉽게 편리하게 할 수 있음Immer.js 라이브러리가 Redux 설치하면 딸려서 설치됨이 라이브러리가, 오브젝트의 값을 직접 변경해도 state 사본을 하나 더 생성해줌.즉 아래

2번은 미리함(ai가 해줌).1번해보기. ai도움없이.cart.jsx 페이지에서 삭제버튼을 추가. 버튼클릭시 redux에 등록된 userCart state 수정함수 실행. payload로 id값 넣기.수정함수deleteItemfindIndex등으로 action.payl

return () 안에서 js if문 사용 못함그래서 보통 return + JSX 전체를 나타내는 if문을 작성해서 사용.return 키워드 만나면 그 다음 코드는 실행 안되니, else 지워도 될듯.return문 안에서 {}괄호를 열어 사용가능.조건문 ? 조건문 참일

localStorage를 이용하면 브라우저에 문자를 저장 가능.5MB까지 저장 가능.쇼핑몰을 만든다면 비회원 장바구니 같은 거 만들 때도 좋을 것 같음.데이터 입력localStorage.setItem('데이터명', '데이터');데이터 출력localStorage.getI

최근 본 상품목록의 id값을, localStorage에 저장된 배열에 추가단, 이미 해당 id 값이 있다면 passDetail페이지 접속현재 페이지에 보이는 상품id 가져와서localStorage에 watch항목에 있던 에 추가내가 한 코드는 어제 작성 완료.다른

기능개발이 얼추 됐으면, 이제 성능개선이 필요.F12눌러서 elements탭에서 html css js파일 확인하거나, source탭에서 디버거 걸고 작동을 확인하는 등으로 버그를 체크할 수 있다.여기에, 리액트 개발용 크롬 확장프로그램 React Developer To

자식컴포넌트의 재렌더링을 막아줌정확히는, 자식컴포넌트가 받는 props에 변화가 있을때만 재렌더링되도록 함.부모컴포넌트에서 props로 보낸 원본 변수와 자식컴포넌트에서 받은 props값을 서로 비교. 그 둘에 차이가 발생하면 재렌더링시키는 방식.그래서 props가 너

react 라이브러리 SNS, 코인거래소같은 실시간 데이터를 보여줘야하는 사이트들에 쓰면 유용함몇초마다 자동으로 데이터 다시 가져오게 하기요청실패시 몇초 간격으로 재시도하기다음 페이지 미리가져오기ajax 성공/실패시 각각 다른 html을 보여주기등 등 등, 직접만들기

batching : 무의미한 재렌더링 방지 기능.state변경함수를 연달아서 여러 번 사용하면, 그 갯수만큼 렌더링이 일어남.이걸 하나로 모아줌.아래처럼 3번의 state 변경함수가 연달아 실행된다면,이걸 마지막 변경함수 때 한 번만 재렌더링시켜줌.17버전 이전에는 a

웹사이트를 모바일 앱인 것 처럼 설치해서 사용할 수 있는 사이트service worker 라는 파일과 브라우저의 cache storage 를 사용하여, 인터넷 없는 상황에서도 기본 동작 가능. 물론 서버통신이 안된다면 그 기능들은 동작 안함.유저가 우리 사이트에 접속하

자바스크립트는 일반적인 코드를 작성하면 synchronous 하게 처리됨. 번역하면 동기방식. 코드 적은 순서대로 윗줄부터 차례로 코드가 실행된다는 뜻.근데 자바스크립트는 이상한 함수들을 사용하면 asynchronous 하게 코드실행이 가능번역하면 비동기방식. ajax

react의 유용한 기능 : hook hook을 이용하여 재사용 가능한 함수로 정의해놓은 것 : custom hook.js의 함수의 일종.useState, useEffect 등의 코드를 담고있는 함수 작명할 때는 use를 붙여야 함. 강제임.useState, useEf