기록

1. 컴포넌트 안에서 쓰는 if / else 컴포넌트에서 JSX를 조건부로 보여주고 싶으면 이렇게 씀. 왜냐하면 자바스크립트 if문은 return () 안의 JSX 내에서는 사용이 불가능하기 때문에. ( if(어쩌구){저쩌구} 이게 안된다는 의미) 그래서 보통 return + JSX 전체를 뱉는 if문을 작성해서 사용. function Component() { if ( true ) { return 참이면 보여줄 HTML; } else { return null; } } 참고) 이렇게 쓰는 경우 else 생략 가능 else와 중괄호를 하나 없애도 아까 코드와 똑같은 기능을 함. 왜냐하면 자바스크립트 function 안에서 return 이라는 키워드를 만나면 return 밑에 있는 코드는 더이상 실행되지 않기..

Redux 장점 Redux 는 props 없이 state를 공유할 수 있게 도와주는 라이브러리. Redux를 설치하면 js 파일 하나에 state들을 보관할 수 있고, 그걸 모든 컴포넌트가 직접 꺼내쓸 수 있음. props 전송이 필요 없어지기 때문에, 사이트가 커지고 컴포넌트가 많아질 수록 좋음. Redux 설치 npm install @reduxjs/toolkit react-redux Redux의 개선버전인 Redux Toolkit 라는 라이브러리를 설치하기 위해 위의 코드를 터미널에 입력. 문법이 좀 더 쉬워짐. 설치하기 전에는 package.json 파일을 열어서 'react', 'react-dom' 항목의 버전을 확인해야 함. 두개 모두 18.1.x 이상이면 사용가능. 그게 아닌 경우: "reac..

애니메이션 개발 스텝: 1. 애니메이션 동작 전 스타일을 담을 className 만들기 2. 애니메이션 동작 후 스타일을 담을 className 만들기 3. transition 속성도 추가 4. 원할 때 2번 탈부착 useEffect 를 쓰면 특정 state 아니면 props가 변할 때 마다 코드실행이 가능 동적인 UI 만드는 스텝: 1. 원하는 state 하나 만들고 2. state에 따라서 어떻게 변경될지 작성하고 3. 원할 때 state 변경하기 애니메이션 작동이 안되는 경우: 클래스명이 탈부착 되는지 확인해야 함. 클래스명이 계속 붙어있으면 작동 안되는게 맞음, 붙었다 떨어졌다 해야 함. useEffect 실행 전 return 함수에서 클래스명을 공백(' ')으로 바꿔주면 되는데, 리액트 18버전..

서버란? 유저가 데이터를 요청하면 데이터를 보내주는 프로그램. 서버에 데이터 요청시에는 정확한 규격에 맞춰서 요청해야 함. 1. 어떤 데이터인지(URL 형식으로) 2. 어떤 방법으로 요청할지(GET or POST) 데이터를 서버에서 가져올 때는 GET, 데이터를 서버로 보낼 때는 POST. GET/POST GET 요청하는 가장 쉬운 방법은 브라우저 주소창임. URL 적으면 거기로 GET 요청을 해줌. POST 요청하는 방법은 태그를 이용하면 됨. 그러면 폼 전송시 POST 요청을 해줌. GET,POST 요청의 단점은 브라우저가 새로고침된다는 것. AJAX 서버에 GET,POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 브라우저 기능. AJAX 로 GET/POST 요청하는 방법 3개..

리액트에서는 내부에 있는 를 갈아치워서 다른 페이지를 보여줌. 이럴때 유용한 유용한 외부 라이브러리가 react -router-dom. react-router-dom 설치 react-router-dom 홈페이지에 들어가서 안내에 따라 설치하면 됨. 터미널 열어서 npm install react-router-dom@6 입력해서 설치. index.js 셋팅 import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); react-router-dom import 해오고 로 감싸기. router 로 페이지 나누기 somewhere.com/..

export default / import 문법 다른 파일에 보관되어 있는걸 가져올 때 import export defalut 변수명; 이렇게 쓰면 원하는 변수 내보낼 수 있음. (data.js 파일) let a = 10; export default a; export 한 변수를 다른 파일에서 사용하고 싶다면 import 작명 from './파일경로' 하면 됨. (App.js 파일) import a from './data.js'; console.log(a) * 변수, 함수, 자료형 전부 export 가능. * 파일마다 export default 라는 키워드는 하나만 사용가능 (export default a, b, c; 는 불가능) * 파일경로는 ./ 부터 시작해야 함(현재경로라는 의미). export { ..

css 파일에서 background-image로 이미지 넣기 (App.js) (App.css) .main-bg { background-image : url('./image.png'); // css 파일에서 src 폴더안에 있는 사진을 사용하고 싶으면 ./이미지경로 사용하면 됨. } html 에서 background-image로 이미지 넣기 이미지를 import 해오고 사용해야 함. 1. import 작명 from './이미지경로' 2. 이미지경로가 필요한 곳에 작명한 이름을 사용하면 됨. ( 태그의 경우에는 이렇게 쓰면 됨) import bg from './image.png' // 이미지를 import 해오고 사용해야 함 function App(){ return ( ) } 어딘가 호스팅되어있는 외부 이미..

유저가 입력한 input 데이터 처리 방법 다양한 종류의 태그 사용하기 에 입력시 코드 실행하고자 하면 onChange 나 onInput 이벤트핸들러 부착하면 됨. { 실행할코드 }}/> { 실행할코드 }}/> // input에 유저가 뭔가 입력할 때마다 안에 있는 코드를 실행함. 에 입력한 값 가져오는 방법 e라는 파라미터를 추가하고, e.target.value 라고 적으면 현재 입력된 input 값을 가져올 수 있음. 이벤트핸들어에 들어가는 함수에 파라미터로 e를 추가하면 e는 이벤트 객체라고 부르고, 현재 발생하는 이벤트와 관련한 유용한 기능들을 제공하는 일종의 변수임. e.target 은 현재 이벤트가 발생하는 곳을 알려주고, e.preventDefault() 는 이벤트 기본 동작을 막아주고, e..