안녕하세요, 피터팬입니다! 오늘은 useRef로 input 상태를 관리해볼 건데요. https://peter-coding.tistory.com/204?category=1287898 [React] useState로 input 상태 관리하기 이번에 해볼 것은 input요소에서 사용자가 입력한/선택한 값을 제어해볼 건데요! let으로 선언한 변수는 JS내에서 변경은 가능하지만, 값이 변경되었다고 다시 렌더링 하지 않습니다. useState로 선 peter-coding.tistory.com 지금까지는 위에서처럼 useState를 이용하여 input 상태를 관리해왔습니다. useRef를 이용하면 더 간편하게 input상태를 관리할 수 있습니다. 적용법 import {useRef} from 'react' 사용법 i..
안녕하세요, 피터팬입니다! 오늘은 Createportal을 이용하여 특정 요소에 하위 요소를 추가해보겠습니다. Createportal은 DOM 계층 구조 바깥에 있는 DOM 노드(APP.js보다 상위요소)로 자식을 렌더링할 때 사용합니다. 적용법 react-dom으로부터 ReactDOM을 import해줍니다. (react아닙니다) import ReactDOM from "react-dom"; 사용법 ReactDOM.createPortal(요소,위치) 예시 # public>index.html # App.js React.CreatePortal( , document.querySelector('#backdrop-root') ) => 아래 그림처럼 #backdrop-root 아래에 Backdrop Component..
[React] 안녕하세요, 피터팬입니다! 이전 시간에 했던 컴포넌트 스타일링을, Styled-component가 아닌, CSS Module을 사용하여 적용해볼 건데요 ! Styled-component는 Component(JS파일) 내부에 적용하였다면, CSS Module은 CSS파일을 JS파일로부터 분리하여 작성합니다. 그래서, CSS파일과 JS파일을 분리하고싶다 싶은 분에게는 CSS Module이 더 적합합니다. 그리고, CSS Module은 별도의 Module을 설치하지 않아도, CRA(Create-React-App)에 설치되어 있습니다. 다운로드 X ; CRA(Create-React-App)에 설치되어 있습니다. 적용법 css파일이 아닌, module.css(작성은 css와 동일)에서 styles를..
안녕하세요, 피터팬입니다! 오늘은 styled-component를 사용해볼 건데요! React의 style요소를 css로 꾸밀 때, 보통 class를 사용합니다. className="button"이라고 하여 css에 연결합니다. 그런데, 다른 component에도 button이라는 class가 있다면 해당 component에도 의도치 않게 적용이됩니다. 이러한 문제를 해결하기 위해 사용하는 것이 styled-component인데요! 사이트는 다음과 같습니다. 사이트 https://styled-components.com/ styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style you..
오늘 해볼것은 React에서 Checkbox를 구현하는 건데요 ! checkbox는 다른 input(text)와 다르게 체크되어있는지 아닌지를 나타내는 checked 속성을 사용합니다. 18 : checkedList state를 만든다. 19~25 : handleCheckbox라는, onChange에 넣어줄 함수를 만든다. 인수로 체크상태를 확인하는 checked, 어디 체크박스인지 확인하는 value를 받는다. 함수 내에서는 checked=true이면 spread연산자를 이용해 value를 checkedList에 추가해주고, false이면 filter함수를 이용해 value를 빼준다. 36~ : value에 checkbox들을 구분할 값을, onChange에는 handleCheckbox함수에 인수를 넣..
Hook 1. useState 선언 ; const [state,setState] = useState(initialValue) 사용 ; setState(changeValue) input 1개 일 때 ; onChange = {(e) => {setState(e.target.value)}} / value={state} input 2개 이상 일 때 ; onChange = {(e) => {setState({...state, [e.target.name]:e.target.value})}} / value={state.text} name="text" input이 checkbox일 때 & 2개 이상일 때 선언 ; const [list,setList]=useState([ ]) handle함수 ; if(checked){setL..
이번에는 Component로 css요소를 복사해볼 건데요! 얼핏 보기에는 Component를 열린태그로 그냥 둘러싸면될 것 같지만, Component로 그냥 둘러싸면 열린태그 안의 내용들은 Component 안에 들어가지 않게됩니다. Card Component에 공통 css를 만들어보겠습니다. 3~5 : props를 전달받아 props의 className과 적용할 class인 card를 합쳐주었고, 열린태그 안에 {props.children}으로 열린 태그 안의 요소들을 집어 넣어주었습니다. import "./Card.css"; const Card = (props) => { const classes = "card " + props.className; return {props.children}; // ch..
1. favicon 파일 삽입 2. title 변경 index.html에서는 title만 변경하면되지만, 각각의 컴포넌트에서의 title 변경하려면 아래처럼 변경해야함 # index.html # 각각의 컴포넌트 useEffect(() => { const titleElement = document.getElementsByTagName("title")[0]; titleElement.innerHTML = `감정 일기장 - ${id}번 일기`; }, []); 3. OG(Open Graph), twitter 꾸미기 index.hteml > head에 아래 삽입하기 4. 파일 압축 $ npm i -g server $ npm run build ; build파일에 압축 $ serve -s build ; 압축한 buil..
