Study/React

[React_study] public 폴더 & 이미지 넣기

* public 폴더의 용도 이미지 같은 static 파일의 경우 public폴더에 보관하여도 된다. 리액트로 개발을 끝내면 build 작업을 하게 되는데 지금까지 작성한 코드를 하나의 파일로 압축해주는 작업이다. src 폴더에 있던 코드와 파일은 다 압축이 되는데 public 폴더에 있는 내용들은 그대로 보존된다. 그래서 형태를 보존하고 싶은 파일은 public폴더에 넣으면 된다. 이미지, txt, json등 수정이 필요없는 static 파일들의 경우엔 public 폴더에 보관해도 상관없다. JS파일은 제외(압축이 필요함) * public 폴더에 있는 이미지 사용할 때는 위의 예시처럼 "/이미지경로"로 사용하면된다. css파일에서도 "/이미지경로"로 사용하면 된다. public 폴더에 넣으면 impor..

[React_study] 사용자가 입력한 글 다루기(input)

* 에 입력한 값 가져오기 { console.log(e.target.value) }}/> e 혹은 event라는 파라미터 추가 e.target.value값을 출력해보면 현재 안에 입력된 값을 가져올 수 있다. e는 이벤트 객체라는 이름으로 부르는데 현재 발생하는 이벤트와 관련한 유용한 기능들을 제공하는 일종의 변수이다. (작명은 e 말고 자유롭게 해도 된다.) (참고사항) e.target : 현재 이벤트가 발생한 곳 e.preventDefault() : 이벤트 기본 동작을 막아준다. e.stopPropagation() : 이벤트 버블링을 막아준다. * 에 뭔가 입력시 코드를 실행하기 onChange 혹은 onInput 이벤트 핸들러를 이용한다. onChange 혹은 onInput은 에 유저가 뭔가 입력을..

[React_study] 자식이 부모의 state 가져다쓰고 싶을 때는 props

* props를 이용하여서 부모 -> 자식으로 state전송하는 방법 자식 component사용하는 곳에 가서 자식 component 만드는 function으로 가서 props라는 파라미터를 등록후 props.작명 및 사용 보통은 props의 명과 state의 명을 동일하게 해준다. 아래의 예시를 통해 확인 title이라는 부모 컴포넌트의 state를 자식 컴포넌트 에 전송해봅시다. function App (){ const [title, setTitle] = useState('Hello world'); return ( ) } function Modal(props){ return ( { props.title } date content ) } props는 10개, 100개, 100개 무한히 전송 가능하다. ..

[React_study] React에서의 List 생성 (map)

* 자바스크립트에서의 map 함수 사용하는 방법 모든 array 자료에는 map() 메서드를 사용할 수 있다. map() 메서드가 가지고 있는 기능을 예시를 통해 확인 * 예시 코드 (기능1) - array에 들어있는 자료갯수만큼 그 안에 있는 코드를 반복실행 - console.log(1) 3번 실행 const array = [1,2,3]; array.map(function(){ console.log(1) }); * 예시 코드 (기능2) - 콜백함수의 첫번째 인자값을 넣어서 array안에 있던 모든 자료를 하나씩 출력해준다. - 2, 3, 4가 콘솔창에 출력된다. const array = [1,2,3]; array.map(function(a){ console.log(a) }); * 예시 코드 (기능3) ..

[React_study] 리액트 환경에서 동적인 UI 만드는 법

* 리액트에서 동적인 UI 만드는 step - 동적인 UI는 유저가 조작시 형태가 바뀌는 모달창, 탭, 서브메뉴, 툴팁, 경고문 등등의 UI들을 의미한다. html, css를 이용해 미리 UI디자인을 만들어놓는다. UI의 현재 상태를 state를 이용해 저장해둔다. state에 따라서 UI가 어떻게 보일지 조건문을 이용해 작성한다. * 모달창을 이용한 동적인 UI 예시 코드 * html, css 디자인 Title Date Content .modal{ margin-top : 20px; padding : 20px; background : #eee; text-align : left; } * UI의 현재 상태를 state로 저장 let [modal, setModal] = useState(false); (stat..

[React_study] 많은 div들을 한 단어로 축약하려면 (Component)

* 복잡한 html을 한 단어로 치환할 수 있는 Component 문법 리액트는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공한다. 이를 Component라고 하며 Component를 이용하면 함수 만들듯, 변수 만들듯 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 꽃아넣을 수 있다. * Component 예시 코드 function App (){ return ( ) } function Modal(){ return ( Title Date Content ) } function을 이용해서 함수를 하나 만들어주고 작명한다. 그 함수 안에 return () 안에 축약을 원하는 HTML을 담으면 된다. 사용을 원하는곳에서 을 사용하면 아까 축약해두었던 HTML이 나타난다. 이렇게 축약한..