Context- context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다.- context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법이다.  그러한 데이터로는 현재 로그인한 유저, 테마, 선호하는 언어 등이 있다. - React 애플리케이션에서 데이터는 props를 통해서 부모에서 자식에게 전달되지만,   애플리케이션 안의 여러 컴포넌트들에게 props를 전달해줘야 하는 경우 context를 이용하면   명시적으로 props를 넘겨주지 않아도 값을 공유할 수 있게 해주는 것이다.   => 데이터가 필요할 때마다 props를 통해 전달할 필요가 없이 context를 이용해 공유한..

Redux- 리덕스를 사용하면 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서   더욱 효율적으로 관리 할 수 있으며 글로벌 상태 관리도 손쉽게 할 수 있다. - 상태값을 컴포넌트에 종속시키지 않고, 상태 관리를 컴포넌트의 바깥에서 관리 할 수 있게 된다. - Redux와 React는 독립적으로 사용될 수 있는 별개의 다른 라이브러리이다.- Redux는 자바스크립트 어플리케이션에서 흔히 쓰이는 상태관리 라이브러리이다. - Redux는 Angular, Vue, Ember, jQuery 또는 Vanilla JavaScript와 같은 다른 라이브러리,    프레임워크에서도 사용할 수 있다 원래는 부모가 상태변수를 다 쥐고있기 때문에 부모를 통해서 전달전달하는 props 방식을 썼다.이제는 Store다..

BoardDetailForm.module.css.detail-container { display: flex; flex-direction: column; align-items: center; padding: 20px; width: 100%;}.detail-title { font-size: 28px; font-weight: bold; margin-bottom: 20px; text-align: center;}.detail-info { display: flex; justify-content: space-between; width: 100%; max-width: 800px; margin-bottom: 20px;}.detail-author,..

세션 저장LoginForm.jsxwithCredentials: true 추가하기 if(!id) setIdDiv('아이디를 입력해주세요'); else if(!pwd) setPwdDiv('비밀번호를 입력해주세요') else{ axios.get(`http://localhost:8080/spring/member/login?id=${id}&pwd=${pwd}`, { withCredentials: true }) .then(res => { if (res.data === 'success') { ..

Spring + React  +MyBatis(MySQL) Project: SpringReactProjectPackage: com.spring.SpringReactProject    이렇게 잘 뜨면 프로젝트 잘 만들어진거다 !!pom.xml org.springframework spring-jdbc 5.3.37 org.apache.commons commons-collections4 4.4 org.apache.commons commons-dbcp2 2.11.0 com.mysql mysql-connector-j 8.3.0 org...

src          css               style05.css           page05                data.jsx                 Main.jsx                 ProductDetail.jsx                 ProductList.jsx             App.js           App05.jsxstyle05.css.menunav {width: 100%; background: #efefef; padding: 25px 0;}.menunav ul {display: flex; justify-content: center;}.menunav ul li {list-style: none; margin-right: 30px;}.men..

useReducer()React에서 컴포넌트의 상태 관리를 위해서 useState를 사용해서 상태를 업데이트를 하는데, useReducer를 사용하게 되면 컴포넌트와 상태 업데이트 로직을 분리하여 컴포넌트 외부에서도 상태 관리를 할 수 있다.즉, 현재 컴포넌트가 아닌 다른 곳에 state를 저장하고 싶을 때 유용하게 사용할 수 있다.  원래는 컴포넌트와 상태변수를 같이뒀었다.부모 자식 관계가 복잡한 상태에서 상태변수를 서로 공유하면서 쓰려면 복잡하다. (전달 전달 전달해서 줘야하므로) 그러므로 데이터 공유 지역을 따로 만들어서 거기에 데이터를 보관하는 것이다.그리고 필요할 때 갖다쓰라는 것이다.컴포넌트와 변수를 따로따로 관리하자는 것이다. (컴포넌트와 별개의 개념으로 들어가야한다.)이런 Redux를 하려..

데이터 읽기, 쓰기웹 스토리지HTML5에서 추가된 기술로 로컬스토리지와 세션스토리지로 구분된다.특징- 웹 스토리지는 Key와 Value 형태로 이루어졌다."list" => Key[{"seq":3, "text": "공부하기"}, ~~~] => Value이런식으로 key- value 이렇게 되어있다. 웹스토리지에는 무조건 문자여 string 형식으로만 저장되므로나중에 로컬스토리지에서 가져올 때는 로컬스토리지 string => 자바스크립트 json (json.parse) 이렇게 해서 가져오고 로컬스토리지에 저장할 때는 자바스크립트 json => 로컬스토리지  string (json.stringify) 이렇게해서 저장한다.- 웹 스토리지는 클라이언트에 대한 정보를 저장한다.- 웹 스토리지는 로컬에만 정보를 저장..