본문 바로가기
반응형

React44

input태그와 textarea를 React에서 사용하기 이와같은 textarea를 리액트에서 사용하려면 몇개 속성을 수정해줘야한다. Tell us your story: It was a dark and stormy night... 이와같은 녀석을 Tell us your story: 아래와 같이 바꿔서 써줘야한다. rows와 cols는 {}안에 속성값을 넣어줘야하고 for같은거는 htmlFor로 바꿔써줘야 한다. - 참고한링크 https://developer.mozilla.org/ko/docs/Web/HTML/Element/textarea - HTML: Hypertext Markup Language | MDN HTML 요소는 멀티라인 일반 텍스트 편집 컨트롤을 나타냅니다. developer.mozilla.org https://www.pluralsight.com/.. 2022. 4. 28.
react에서 axios를 이용해 fomdata전송하기(문자열, 이미지) AWS S3에 문자열 언어코드, 국가이름 그리고 사진파일을 업로드 해달라는 팀원의 요청 나야 어렴풋이 밖에 모르지만 S3에 직접 백엔드가 db를 등록하면 안되냐고 했더니, 그것보다 이렇게 하는게 10배는 빠르다고 한다. 근데 db구성을 이렇게 하는게 맞나 싶긴하지만.. 시간도 없고 일단 해달라는대로 해주게 되었다. 그리고 생각해보면 나중에 추가할 때 관리자페이지에서 넣듯이 이런 페이지를 하나 만들어두면 유지보수 측면에서도 좋을거 같기는하다! api도 만들어줘서 FormData전송하는것도 해볼겸 오늘 바로 진행 해봤다. 이와같이 POST방식으로 data에 보내줘야한다고한다. 찾아보니 FormData는 정해진 방식이 있다. https://developer.mozilla.org/en-US/docs/Web/AP.. 2022. 4. 27.
리액트 조건문 나는 기본적으로 2개를 사용하고 있다. 1.삼항연산자 { 특정state ===true ? 참이면 보여질곳 : 거짓이면 보여질곳 } 2.&&연산자 const [arr,setArr] = usesate([]) const handleArray = ()=>{ setArray([1,2,3,4,5])} ........ { arr&&참이면 실행 } // 그리고 응용해 map도사용가능 { arr&& array.map(function(a,index){ return {a} } map사용관련해서 원래 삼항연산자만 사용했는데 생각해보니 &&도 잘되는걸 오늘 알게되었다. 알고는 있었지만 삼항연산자만 주구장창 썼는데, 필요하면 && 쓰는게 축약하기도 아주 좋아보인다. 팀원들이랑 같이 하면 이런게 좋은거같다! - 참고한링크 http.. 2022. 4. 27.
axios 여러개 요청하기 (멀티 리퀘스트) axios를 사용하다보면 get도 그렇고 post도그렇고 한번에 여러 api요청을 보내야 할 때가 있다. 그때마다 그냥 2~3거나 1~2개면 useEffect를 두번쓰거나해서 가져오곤 했지만 그냥 한번에 멀티리퀘스트를 보내는 방법이 있다. axios.all을 사용하는 것이다. function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return axios.get('/user/12345/permissions'); } axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { // Bo.. 2022. 4. 2.
useWindowSize Hook, 반응형 NavBar,Footer 브라우저 사이즈가 바뀜에 따라 NavBar의변경, 하단 Footer의 변경등을 구현하고 싶었다. 순수 바닐라 자바스크립트의 window.innerWitdh를 조절하는것도 가능하지만 만들어진 훅이 있길래 가져와서 사용했다. 현재 부트스트랩 Grid System을 사용중이고 해당 사이즈를기준으로 경계를 주어 사용해 주었다. 그리고 아래와같이 useState와 useEffect까지 사용해 구현했다. ....... const size = useWindowSize(); // const [size,setSize] = useState(size) const [sizeon,setSizeon] = useState(false) useEffect(()=>{ if(size.width567){ setSizeon(false) } .. 2022. 4. 2.
Mui 스타일 설정 Mui 컴포넌트 style설정하는법, 텍스트 Area 사이즈를 조정하고 싶다거나, Margin을주고싶다거나 할때 style={{ width: 200 }} 속성을 사용해주면 된다. {setSearch(event.target.value)}} onKeyPress={(e) => { if (e.key === "Enter") { router.push( { pathname: "/SearchTextResult", query: { textResult: search, }, }, `/SearchTextResult` ); } }} /> 이와같이 텍스트필드 사이즈를 조절할때 위와같이 style={{width:150}}으로 사용해 주었고 { router.push( { pathname: "/SearchTextResult", que.. 2022. 3. 31.
반응형