Javascript36 [React] LifeCycle API 해외 직구로 시킨 모자가 3주 만에 왔다. 1. LifeCycle API 2. 컴포넌트 초기 생성 2-1. constructor constructor는 먼저 props를 파라미터로 받아오고 안에 super(props)를 해줘야 하는데 용도는 원래 갖고 있던 생성장 함수를 불러와주고 하고 싶은 작업을 할 때 사용된다. constructor(props) { super(props); console.log('constructor'); } 2-2. componentDidMount 이 API는 주로 외부 라이브러리를 연동하거나 컴포넌트에서 필요로 하는 데이터 요청을 하거나(ex: ajax, graphQL) DOM에 관련된 작업(ex: 스크롤 설정, 크기 읽어오기)을 할때 사용한다. conponenetDidMount.. 2023. 1. 16. [React] state 몬스터 흰색은 왜 맛있을까 예제와 함께 이해를 해볼 예정🔥🔥🔥 먼저 앞서 요약해서 말하면 props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다. 자식 컴포넌트에서는 props를 받아오기만하고, 받아온 props를 직접 수정은 불가능하다. 반면에 state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경 할 수 있다. 1. state 란? State는 props처럼 App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체지만, props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다는 차이가 있다. props를 사용했는데도 state를 사용하는 이유는, 사용하는 쪽과 구현하는 쪽을 철저하게 분리시켜서 양쪽의 편의성을 .. 2023. 1. 16. [javascript] 게시글 더보기 c to HDMI 케이블에 4만 원을 쓴 사람이 있다? 구현사항 일정 너비 이상으로 넘어가게 되면 더보기로 말 줄임... 가 나오고 옆에 있는 더 보기를 클릭하면 내용 전체를 보여주는 기능을 구현해 보았다. 내가 했던 방식 곰곰이 생각을 해봤다. 필요한 준비물(css)이 뭐가 있는지........... 먼저 이 기능을 위해 따로 사용한 css는 아래와 같다. text-overflow : ellipsis overflow : hidden white-space : nowrap 이게 뭔데?라고 할 수도 있기 때문에 간략히 적어보자면 상단의 구현 사항에 쓰인... 풀어준다. 글이 개행되지 않고 쭉 써진다? ===> 풀어준다. 그래서 more 클래스 코드를 보면 display를 inline으로 바꿔주고 white-.. 2023. 1. 16. [javascript] 댓글 작성 기능 (click,keyCode) 바닐라 자바스크립트.... 날것 그 자체의 스크립트... 구현사항 input에 글을 작성하면 게시라는 버튼과 키보드에 Enter를 누르면 내가 쓴 댓글이 댓글란에 추가가 되는 기능을 구현하려고 한다. 먼저, 간과했던 점 그냥 올라가기만 하면 되는거 아닌가? input에 value 값 받아오고 id는 임의로 지정해 놓은 string을 받아와서 같이 뿌려주면 되는 거 아닌가?라는 안일한 생각으로 기능구현에 임했다. 쉽게 될 줄 알았ㄷ... 직접 하나하나 작성한 민망함이 가득한 코드를 보면서 회고와 복기를 해보자 내가 했던 방식 const userNickname = document.getElementById("user-nickname").innerHTML; const userComment = document... 2023. 1. 16. 이전 1 2 3 4 5 ··· 9 다음 반응형
