hwlink

React에서 함수 컴포넌트의 rendering이란 state, props를 기반으로 UI 요소를 그려내는 행위이다.  (state, props) ⇒ UI    Side Effect 부작용, 부수 효과라고도 부르는 Side Effect는 일상 생활의 맥락에서는 부정적인 의미로 사용되는 경우가 많지만 프로그래밍 측면에서의 Side Effect는 단순히 부정적인 의미로만 사용되지 않는다.아래처럼 input - output 이외의 다른 값을 조작한다면, 이 함수에는 Side Effect(부수 효과) 가 있다고 표현한다.let count = 0function helloWord(name) { // Input count = count + 1 // Side Effect return `${name}..

Coding/React 2021. 12. 5. 11:26

참고:https://ko.reactjs.org/docs/lists-and-keys.html 인스타그램 메인페이지 댓글기능에서 인풋값을 담은 배열을 map 메서드를 이용하였다. 아래와 같은 warning이 발생하여 공식문서를 참고하여 답을 찾았다. Key Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것입니다. 대부분의 경우 데이터의 ID를 key로 사용하며 배열를 분류한다거나 정렬을 새로할 경우에 값이 바뀔 수 있으므로, index를 key값으로 주는 것..

Coding/React 2021. 11. 23. 22:46

최종구현목표리액트로 인스타그램 클론코딩  깃으로 공유한 Nav.js, variables.scss, reset.scss, common.scss  state와 함수 댓글이 입력된 댓글리스트를 컴포넌트화컴포넌트화 된 리스트 map 메서드 사용 form tag 내부 input, button 리스트와 이벤트  ㅇ 구현 사항 설명로그인, 피드 레이아웃팀원들간 nav 컴포넌트 공용사용팀원들간 variables.scss 변수 지정하여 공동사용useState 활용하여 로그인, 피드 댓글 기능 추가작성할때마다 나타나는 Review 컴포넌트화하여 map함수로 구현하였습니다.로그인 유효성 검사, 댓글 input 유효성 검사 (조건문을 활용하여 로그인버튼,..

Coding/React 2021. 11. 22. 09:59

인스타그램 클론 로그인구현목표: 아이디에 @가 포함되고 비밀번호 자릿수가 5자리 이상이여야 로그인 버튼이 활성화 되며  /   main 페이지로 이동가능하다. 조건을 만족하지 못하면 로그인페이지에 머무른다.  email, password, handleIdInput, handlePasswordInput  스테이트와 함수 input  이벤트리스트 useState 이용이메일과 패스워드를 저장할 state 선언 로그인 버튼 활성화 되게 하기 로그인 버튼 활성화는 미리 스타일링 해둔 클래스를 추가하는 방식으로 진행하였다. 버튼의 비/활성화를 담당할 isActive를 false로 할당해줍니다.button className ={. } 에 삼항연산자를 적용해 위에 onKeyUp으..

Coding/React 2021. 11. 20. 14:32

1. 타이틀 변경 을 찾아야한다. 타이틀은 public >> index.html 내부에 있다. 2.파비콘 변경 변경할 이미지 파일을 준비해둔다. https://www.favicon-generator.org/ Favicon & App Icon Generator Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons. www.favicon-generator.org 해당 링크로 접속하여 파일을 업로드하면 각 기기,운영체제에 최적화된 파비콘을 제공해준다. .ico파일은 ms윈도우에 아이콘에 쓰이는 그림파일입니다. *ico만 ..

Coding/React 2021. 10. 17. 16:43

기존 html css 에서 fontawesome 사용시 cdn으로 불러와서 사용하였으나 리액트에선 역시 같은 방법으로 적용되지 않았다. 리액트는 초반설계가 많이 들어간다는걸 다시 한번 느꼈다. 하지만 모든업무에서 노가다보다 초반설계 오래걸리더라도 제대로 세팅하면 그 이후가 편한다는것을 알기에... 리액트에 폰트어썸 적용방법이다. (출처: https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react) 터미널입력창 (프로젝트에 패키지를 설치) npm 설치 npm i --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free-solid-svg-icons npm inst..

Coding/React 2021. 10. 12. 12:11