전체 글 (40) 썸네일형 리스트형 [React] - 이미지 넣는 법 import bg from '../bg.jpg'; const Test = () => { return ( ); } 리액트로 개발을 끝내면 build 작업이라는걸 하는데, 지금까지 짰던 코드를 한 파일로 압축해주는 작업입니다. src 폴더에 있던 코드와 파일은 다 압축이 되는데 public 폴더에 있는 것들은 그대로 보존해줍니다. 그래서 형태를 보존하고 싶은 파일은 public 폴더에 넣으면 되는데 js 파일은 그럴 일은 거의 없고 이미지, txt, json 등 수정이 필요없는 static 파일들의 경우엔 public 폴더에 보관해도 상관없습니다. public 폴더 안에 이미지가 있는 경우 나는 그냥 src 폴더안에 resource 폴더에 넣어서 사용한다. [React] - input 태그 에 입력한 값 가져오는 법 { console.log(e.target.value) }}/> e - 작명 자유롭게 가능 e.target 현재 이벤트가 발생한 곳을 알려주고 e.preventDefault() 이벤트 기본 동작을 막아주고 e.stopPropagation() 이벤트 버블링도 막아줍니다. 이거 쓰면 좋아요버튼 누를 때 모달창도 떠버리는 버그 해결가능 사용자가 input에 입력한 데이터 저장하기 const Test = () => { let [title, setTitle] = useState('') return ( { setTitle(e.target.value) console.log(title); }}/> ); } * 첫 입력한 값이 안뜨는 이유는 state 변경함수 특징 때문, state 변경함수는 .. [React] - state 값 전달 props const Test = () => { let [title, setTitle] = useState(['바나나', '딸기', '사과']) return ( ); } const Modal = (props) => { return( modal {props.title[0]} ) } * 꼭 부모에서 자식으로만 보낼 수 있다. 일반 변수, 함수 전송도 가능하고 일반 문자전송은 중괄호 없이 이렇게 해도 됩니다. [React] - 반복문 map() react 하기전 ejs 사용할때에는 for으로 돌렸는데 jsx에서는 map()함수를 이용해야한다. (굳이 for 반복문을 할 순 있는데 코드도 길고 이젠 map() 더 편함) const Test = () => { let [title, setTitle] = useState(['바나나', '딸기', '사과']) return ( { title.map((item, index) => { return {item} }) } ); } title을 반복문으로 돌려보았다. 첫인자로는 val 값을 임의로 작명할 수 있고, 두번째는 값의 길이만큼 0부터 자동 증가한다. 그리고 map() 돌릴 때 항상 최상위 부모에 key 값을 넣으라하는데 여기에 index 값이나 item의 id 값이 있다면 넣어주면 된다. [javascript] this 키워드, arrow function 함수 안에서 쓰면 새로 생성되는 오브젝트를 뜻함 function userName() { this.name = 'park' } let createName = new userName(); 이벤트리스너 안에서는 e.currentTarget (지금 이벤트 동작한 곳) document.getElementById('btn').addEventListener('click', function(e) { console.log(this); console.log(e.currentTarget); }) 일반 함수에서는 window document.getElementById('btn').addEventListener('click', function(e) { var array = [1,2,3]; array.forEach(functio.. [React] - 컴포넌트(Component) . react 특성 중 하나 반복되는 html을 컴포넌트로 빼 재사용 할 수 있다. Component 만들 때 주의사항 1. component 작명할 땐 영어대문자로 보통 작명합니다. 2. return () 안엔 html 태그들이 평행하게 여러개 들어갈 수 없습니다. 3. function App(){} 내부에서 만들면 안됩니다. 왜냐면 function App(){} 이것도 다시보니 컴포넌트 생성문법이죠? component 안에 component 를 만들진 않습니다. 4. 이렇게 써도 되고 이렇게 써도 됩니다. const Test = () => { return ( ); } const Modal = () => { return( modal ) } Modal 이 Modal.js 로 다른파일에 있다면 Test.j.. [React] - state 변경 const Test = () => { let [val, setVal] = useState(0); return ( {setVal(val+1) }} > {val} ); } get(val) : 값만 가져오는 곳 set(setVal) : 설정, 값변경 결국에는, SET, GET 메소드를 사용하는 이유는 외부로부터 변수값에 직접적으로 접근하는것을 막기 위해서다. 직접 접근하개 되면 값이 변하게 되고 그러면 데이터 무결성이 깨질 수 있기 때문이다. * state 의 값을 변경하기 위해선 setVal 값으로 바꾼다! array, object state 변경 하려면 [...val] {...val} 이런식으로 카피본을 만든다. ... - spread operator 라고하는 문법인데 array나 object 자료형 왼쪽.. [React] - 데이터 바인딩 state에 값을 담아 둘 수가 있다. react 특성 상 title이라는 값이 변경이 되면 자동으로 재렌더링(데이터만 바뀌면 자동으로 바뀌는)되는 구조이다 보니 이런식으로 사용이 된다. function App(){ let [title, setTitle] = useState('제목'); return ( { title } ) } 글이 부족한 것 같아 데이터 바인딩을 검색해보니 양방향, 단방향 바인딩이 나오는데, view - model / model - view 값이 있으면 표출해주고, 값이 바뀌면 자동으로 재렌더링 되는것을 말하는 것 같다. 단점으로는 성능이슈가 있다고 한다..(요새 하드웨어가 좋아서 티가 안날것같은...) 단방향 예시 const [inputValue, setInputValue] = use.. 이전 1 2 3 4 5 다음
