[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. map() ; 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환 ex1) numbers의 요소들 각각에 2배를 하여 doubleNumArray에 반환 const numbers = [1,2,3] const doubleNumArray = numbers.map(num=>num*2) console.log(doubleNumArray) // [2,4,6] ex2) number의 요소들을 Number화 시키기 const numbers = ['1','2','3'] console.log(numbers.map(Number)) ex3) map과 assign을 이용한 예시 let userList = [ { name: "Mike", age: 30 }, { name: "Jane", a..
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..
state를 관리하게 될 때, useState를 사용하는 것 말고 useReducer를 사용할 수 있습니다. Reducer 함수는 state 데이터의 수정방법을 미리 정의하는 함수입니다. 기본 형식은 아래와 같습니다. const reducer = (state,action) => { switch (action.type){ case "a": return state+action.payload; default: return state; } } const [money,dispatch] = useReducer(reducer,0) dispatch({type:"a",payload:}) # payload ; 사용에 있어서 전송되는 데이터 # reducer ; state를 업데이트 하는 역할 / state ; reduce..
